欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 网站技巧 > 由不同时间段显示不同问候语看开去...
这篇文章主要为大家详细介绍了由不同时间段显示不同问候语看开去...,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

不同时间段显示不同的内容,例如显示不同的问候语,显示不不同的代码样式,显示不同的网页背景等,

不同时间段显示不同内容实现办法

这是我们经常会看到的不同时间段显示不同内容的一些常见的效果,代码如下:

1、不同时间段显示不同问候语

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不同时间段显示不同问候语</title>
</head>

<body>
<script language="javascript" style="text-align: left">
var week;
if(new Date().getDay()==0)          week="星期日"
if(new Date().getDay()==1)          week="星期一"
if(new Date().getDay()==2)          week="星期二"
if(new Date().getDay()==3)          week="星期三"
if(new Date().getDay()==4)          week="星期四"
if(new Date().getDay()==5)          week="星期五"
if(new Date().getDay()==6)          week="星期六"
document.write("现在是 "+new Date().getYear()+"年"+(new Date().getMonth()+1)+"月"+new Date().getDate()+"日 "+week);
document.write(" ")
day = new Date()
hr = day.getHours()
minu=day.getMinutes()
s="";
s=s+hr+"点"+minu+"分! ";
if (hr ==1)
document.write(s+"一点多啦!别忘了休息哦!")
if (hr ==2)
document.write(s+"你真是工作狂啊,该休息了!")
if (hr ==3)
document.write(s+"午夜三点!你还不准备睡觉吗?")
if (hr ==4)
document.write(s+"凌晨四点多了,很敬重您这种忘我的工作精神!")
if (hr ==5)
document.write(s+"您是刚起床还是还没睡啊?")
if (hr ==6)
document.write(s+"早上好!新一天又开始啦!有什么打算呢?")
if (hr ==7)
document.write(s+"吃过早饭了吗?不要空腹哦!")
if ((hr ==8) || (hr == 9) || (hr ==10))
document.write(s+"早上好!忙碌的一天开始了!")
if (hr ==11)
document.write(s+"快中午啦,准备吃饭了呀!")
if (hr ==12)
document.write(s+"中午好!你吃饭了吗?")
if ((hr==13) || (hr==14))
document.write(s+"下午好,准备准备要上班了!")
if ((hr==15) || (hr==16) || (hr==17))
document.write(s+"下午好!今天都做了些什么啊?")
if ((hr==18) || (hr==19))
document.write(s+"新闻联播你看了吗?吃晚饭了没?")
if ((hr==20) || (hr==21) || (hr==22))
document.write(s+"别工作了,找个电影看看睡觉吧?")
if (hr==23)
document.write(s+"不早了,快休息吧?")
if (hr==0)
document.write(s+"午夜时分,你可要注意身体呢!")
document.write("")
</script>
</body>
</html>

代码演示效果

2、不同时间段显示不同的页面背景色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不同时间段显示不同的页面背景色</title>
</head>


<body>
<script type="text/javascript">
    function changeBg(){
     var date = new Date(),
      time = date.getHours();
  //
  if(time > 6 && time < 18){//白天
      document.body.style.background = "#000" ;
  }else{
      document.body.style.background = "#f00" ; 
  }
   
 }
 changeBg();
</script>
<h1 style=" color:#FFFFFF">白天我的背景色是黑色的,晚上我的背景色就是蓝色的了哦.</h1>
</body>
</html>

代码演示效果

3、在不同的时间显示不同的CSS样式

这个效果是第二种效果的进化版,代码如下:

<html>
<head>
<title>在不同的时间显示不同的提示信息</title>
<script>
function getCSS()
{
        datetoday = new Date();
        timenow=datetoday.getTime();
        datetoday.setTime(timenow);
        thehour = datetoday.getHours();
        if (thehour<12)
            display = "1.css";
        else if (thehour>12)
            //样式表的名称,或者你可以加上路径
            display = "1.css";
        else
            display = "2.css";
        //(...想要更多再加即可...)

        var css = '<';
        css+='link rel="stylesheet" href='+display+' \/';
        css+='>';
        document.write(css);
}

</script>
</head>
<body>
<script type="text/javascript">
window.onload=getCSS();
</script>
js控制不同的时间段显示不同的css样式
</body>
</html>

代码演示效果

推广开去,能不能实现这样的一种效果呢?在不同的时间段显示2个完全不一样的页面或页面内容?

例如我们给出这样的一个命题:一天24小时内实现每个小时交替显示2个不同页面的内容,下面361模板给出处理思路。

4、不同时间段显示不同页面内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不同时间段显示不同页面内容</title>
</head>

<body>

<script>
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
if(h >= 0 && h < 1 || h >= 2 && h < 3 || h >= 4 && h < 5 || h >= 6 && h < 7 || h >= 8 && h < 9 || h >= 10 && h < 11 || h >= 12 && h < 13 || h >= 14 && h < 15 || h >= 16 && h < 17|| h >= 18 && h < 19 || h >= 20 && h < 21 || h >= 22 && h < 23){
document.writeln("<script language='javascript' src='index.js'></script\>");
}
else{
document.write("<script language='javascript' src='index2.js'></script\>");
}
</script>
</body>
</html>

上述代码中有时间判断,有就是index.js和index2.js。这2个JS文件分别代码2个不同的页面的JS代码。实现效果这边就不罗列出来了,有兴趣的盆友

可以自行尝试,361模板亲测完全可行。

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签:

上一篇织梦系统如何去掉文章内容里的img标签

下一篇dede首页和列表页如何调用文章body内容

延伸阅读

《由不同时间段显示不同问候语看开去...》期待您的评论!

评论功能暂时关闭!:)。
取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在