Question

可能重复：
Changing background based on time of day (using javascript)

我正在寻找创建一个网站，其中背景在一天中的不同时间在文件上旋转一堆。有没有什么方法可以根据服务器或脚本时钟在特定时间绑定一些javascript来改变背景？

我希望有一个日/午/傍晚/夜间/黎明的背景，我想循环。

Answer 1

使用this question中的代码，获取本地时间，并更改元素的CSS，从而保留背景。

Answer 2

您可以执行以下操作，然后将i变量传递给元素background-image：

var d = new Date(),
    h = d.getHours(),
    i;

if (h < 6) i = "night.jpg";
else if (h < 9) i = "dawn.jpg";
else if (h < 15) i = "afternoon.jpg";
else if (h < 21) i = "day.jpg";
else i = "night.jpg";

document.body.style.background = "url("+i+")";

http://jsfiddle.net/niklasvh/UZG9z/

Answer 3

将其添加到HTML文档的开头：

<script type="text/javascript">
    (function(){
        var styles = ['night', 'dawn', 'afternoon', 'day', 'evening'];
        var currStyle = styles[Math.floor(styles.length * (new Date()).getHours() / 24)];
        document.documentElement.className += ' ' + currStyle;
    }());
</script>

然后在你的CSS中你可以使用这样的东西：

.night #myelement {
    background-image: url(myImage.jpg);
}
.day body {
    background-color: red;
}

一天中不同时间的不同背景？

3 个答案: