jquery - 根据一天中的时间更改背景图像

Question

我有一个带有背景图像的“部分”。

<section id="header" class="color-light text-center" data-type="background" data-speed="10">

这是CSS

#header {
   background: url('sunrise.jpg') 50% 0 no-repeat fixed;
   height: 800px;
   margin: 0;
   overflow: hidden;
   color: #f4f4f4;
 }

使用这个 javascript 检查一天中的时间...

      var d = new Date();
      var n = d.getHours();
      if (n > 19 || n < 6)
        $("#header").className = "night";
      else if (n > 16 && n < 19)
        $("#header").className = "sunset";
      else
        $("#header").className = "day";

我在 css 文件中有这个......但不确定如何或是否需要使用它

/* backgrounds */
.day { background: url('sunrise.jpg') 50% 0 no-repeat fixed; }
.sunset { background: url('sunset.jpg') 50% 0 no-repeat fixed; }
.night { background: url('night.jpg')50% 0 no-repeat fixed; }

我不确定我是否缺少使用 jquery 更改 #header 并应用更新的背景值的方法。

Answer 1

这应该是让它工作所需要做的全部事情

var d = new Date();
      var n = d.getHours();
      if (n > 19 || n < 6)
        $("#header").css("background", "url('night.jpg')");
      else if (n > 16 && n < 19)
        $("#header").css("background", "url('sunset.jpg')");
      else
        $("#header").css("background", "url('day.jpg')");