Javascript 实现背景定时自动更换

我越来越发现实践出真知这句话是真理,原本我对 Javascript 是一窍不通的,但是今天居然也被我写出了一个还算有用的脚本,可能很多前辈都已经写过了,也可能在大虾们看来是小儿科,不过因为是我第一个亲自写出来的脚本,还是相当得意的。处女脚本写在博客上,留作纪念。

先介绍一个这段 Javascript 的始末,陈小黑小盆友让我帮忙做款主题,看设计的相当不错,不做就可惜了,于是做着玩玩,布局倒是没花我多少时间,就是要求根据不同时间自动更换主题背景的效果让我楞了一下下。百度娘这回不知道了,只好自己动手写脚本,凭着对 PHP 的一点点基础踉踉跄跄算是写出了 Javascript。效果就是,可以根据本地系统时间,判断早上、下午、晚上,并且分别显示对应的背景图片。

因为主题未完成,也未经小黑童鞋同意,不便公布,我就只把背景部分截出来作为 DEMO(点击查看)。代码如下:

<script type="text/javascript">
    function sitebg() {
        var d = new Date();
        var hour = d.getHours();
        if (hour > 4 && hour <= 12) {
            document.getElementById('header').style.background = "url('images/header_1.jpg')";
            document.body.style.background = "url('images/headerbg_1.png') repeat-x scroll 0 10px #EFEFEF"
        } else if (hour > 12 && hour <= 18) {
            document.getElementById('header').style.background = "url('images/header_2.jpg')";
            document.body.style.background = "url('images/headerbg_2.png') repeat-x scroll 0 10px #EFEFEF"
        } else {
            document.getElementById('header').style.background = "url('images/header_3.jpg')";
            document.body.style.background = "url('images/headerbg_3.png') repeat-x scroll 0 10px #EFEFEF"
        }
    }
</script>

然后在 body 标签里加上 onload="sitebg()" 召唤以上脚本:

<body onload="sitebg()">

写出来再自己看看才发现,原来也不过如此,并不难嘛。根据我的设置,从早上5点到中午12点显示图片1,下午13点到下午18点显示图片2,晚上19点到第二天早上4点显示图片3。为了能看到这个 DEMO,童鞋们不用傻等几个小时来看背景图片的更换,只需要调整计算机系统时间就可以看到早中晚三张背景图片的切换了。

,

相关的文章
    • 先介绍一个这段 Javascript 的始末,陈小黑小盆友让我帮忙做款主题,看设计的相当不错,不做就可惜了,于是做着玩玩,布局倒是没花我多少时间,

  1. 请教一下代码高手,有没办法实现首页显示的文章数量和分页的数量不一样,比如我想在首页显示5篇文章(因为首页还有其他东西,所以就让它文章数少点),但是在分页下显示8篇文章??

  2. 使用JS来控制CSS虽然很简便,但是有一个问题就是对主题做部分修改时也需要修改JS 不知道能不能找到更好的方法来实现

      • php语法也是很松散的,也可以建一时间对象,获取当前时间,然后和设定时间比较啊。。你可以参考给标题加上new图标等方法。。

          • js处理要只至少下载两张背景图。。。一张默认的和一张判断后下载的。。
            你觉得一个函数就给服务器增加了压力?那你页面上就啥也别输出了,<?php the_title(); ?> 你也别写了。。

            • 我的意思是相对来说的。
              PHP是服务端语言,JS是客户端语言。
              你说哪种方便一些?就拿注册来说,为什么很多网站都要用JS作为第一道验证,而不是直接提交到服务端去验证然后返回?
              如果你用PHP直接验证,那么写错了10次,那么就要就要对服务器进行10次访问,然后服务器返回10次信息给你。
              如果用JS,你写错100次、1000次,也都只要服务器进行一次访问。

          • 就你说的那个注册验证的例子,标准的都是服务端验证,前台只是为了提高用户体验。。即便如此,前台验证后还是要服务器再验证一遍

            • 是的啊,我说的又没错。
              服务端是必要再验证一次,但总比每次都是服务端验证好吧?
              客户端验证后,再提交到服务端,基本都是合格的,难道不是减少了压力?

  3. 嗯,文本框边的广告明显一点了……那个demo的菜单栏很Vista哦,不错不错~记得Live有几款动态的主题可以根据时间换顶部的图片

  4. 我記得我逛過一外國網站,他的背景圖片是一整天的景象,應該是用jQuery向上不斷重覆移動的~感覺很清新 :roll: 讓我找到後拿給你看 :wink: