Javascript 实现背景定时自动更换

发布于：电脑网络 2,282 次践踏

我越来越发现实践出真知这句话是真理，原本我对 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，童鞋们不用傻等几个小时来看背景图片的更换，只需要调整计算机系统时间就可以看到早中晚三张背景图片的切换了。

与

,

相关的文章