Question

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

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

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

setInterval(function () {
     var hours = new Date().getHours();
     $("#hours").html((hours < 10 ? "0" : "") + hours);

     if (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的值，并相应地设置背景图像。我担心这实际上不是解决这个问题的好方法。这就是原因：

Fiddle of second-by-second interval

我感觉它实际上每秒都会设置背景图像，这会导致糟糕的表现。

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

Answer 1

在更新之前，请检查当前的后台网址？

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);

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

1 个答案: