如何根据时间每隔几个小时更改图像

Question

我尝试了这个，但它没有显示任何图像。如果您可以解释如何使其工作，以便图像在指定的时间出现，这将是伟大的。我将切换出图像，以便每个时间段都有不同的图像。非常感谢！

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

if (hours >= 5  && hours < 7) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >= 7 && hours < 8) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >=8 && hours < 9) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >=9 && hours < 11) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >=11 && hours < 14) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else if (hours >=14 && hours < 18) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else if (hours >=18 && hours < 22) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else if (hours >=22 && hours < 24) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
}, 1000);

Answer 1

background-image应为url(images/day-sky-background.jpg)。

（您错过了url( ... )）

Answer 2

你可以简单地使用setInterval与jQuery结合来实现你的目标，不需要做if-else分支。

修改

function Background(){
    var imgs = [
            "images/day-sky-background1.jpg",
            "images/day-sky-background2.jpg",
            "images/day-sky-background3.jpg",
            "images/day-sky-background4.jpg",
            "images/day-sky-background5.jpg",
            "images/day-sky-background6.jpg",
            "images/day-sky-background7.jpg",
            "images/day-sky-background8.jpg",
            "images/day-sky-background9.jpg"
        ],
        len = imgs.length,
        idx = -1;

    setInterval(function(){

       var hours = new Date().getHours();
       $("#hours").html((hours < 10 ? "0" : "") + hours);
       idx = (idx+1)%len;
       if (hours >= 5  && hours < 7) {
           idx = 1;
       }else if (hours >= 7 && hours < 8) {
           idx = 2;
       }else if (hours >=8 && hours < 9) {
           idx = 3;
       }else if (hours >=9 && hours < 11) {
           idx = 4;
       }else if (hours >=11 && hours < 14) {
           idx = 5;
       }else if (hours >=14 && hours < 18) {
           idx = 6;
       }else if (hours >=18 && hours < 22) {
           idx = 7;
       }

       $("body").css("background", "#000 url("+imgs[idx]+")");
    }, 60*60*1000); //call every hour
}