如何在没有页面刷新的情况下按时间更改背景图像

我想要实现的是让我的页面的背景图像根据一天中的小时而改变。 这很简单，因为它只需要通过Date对象检索小时，并检查它的值。

var hour = new Date().getHours(); if (hour  18) { //set image through url } else { //set another image through url } 

我真正想要的是让背景图像动态变化（没有页面刷新）。 我已经想出了一个用上面的逻辑做到这一点的方法，但我相信它会在每个传递的时间间隔内加载图像：

 setInterval(function () { var hours = new Date().getHours(); $("#hours").html((hours  9 && hours < 18) { $("body").css("background-image", "url(../images/night-sky-background.jpg)"); } else { $("body").css("background-image", "url(../images/day-sky-background.jpg)"); } }, 1000); 

上面的代码将hours值写入页面，并以间隔检查每秒的值。 它还会每秒检查hours值，并相应地设置背景图像。 我担心这实际上不是解决这个问题的好方法。 原因如下：

逐秒间隔的小提琴

我有一种感觉，它实际上每秒都会设置背景图像，这会导致糟糕的性能。

还有另一种方法来解决这个问题吗？

Answer 1

在更新之前，只需检查当前的后台URL？

 setInterval(function () { var hours = new Date().getHours(); $("#hours").html((hours < 10 ? "0" : "") + hours); if (hours > 9 && hours < 18) { if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){ $("body").css("background-image", "url(../images/night-sky-background.jpg)"); } } else { if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){ $("body").css("background-image", "url(../images/day-sky-background.jpg)"); } } }, 1000);