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

我试过这个，但它没有显示任何图像。如果你能解释如何使它工作，使图像在指定的时间出来，那将是伟大的。我将切换图像，以便每个时间段都有不同的图像。非常感谢你

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

setInterval（函数（）{
var hours=新日期（）.getHours（）；
$（“#小时”）.html（（小时<10？：“）+小时）；
如果（小时数>=5和小时数<7）{
if（$（（“body”）.css（“background image”）.indexOf（“night sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/night sky background.jpg”）；
}
}
否则，如果（小时数>=7和小时数<8）{
if（$（（“body”）.css（“background image”）.indexOf（“night sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/night sky background.jpg”）；
}
}
否则，如果（小时数>=8和小时数<9）{
if（$（（“body”）.css（“background image”）.indexOf（“night sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/night sky background.jpg”）；
}
}
否则，如果（小时数>=9和小时数<11）{
if（$（（“body”）.css（“background image”）.indexOf（“night sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/night sky background.jpg”）；
}
}
否则，如果（小时数>=11和小时数<14）{
if（$（（“body”）.css（“background image”）.indexOf（“day sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/day sky background.jpg”）；
}
}
否则，如果（小时数>=14和小时数<18）{
if（$（（“body”）.css（“background image”）.indexOf（“day sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/day sky background.jpg”）；
}
}
否则，如果（小时数>=18和小时数<22）{
if（$（（“body”）.css（“background image”）.indexOf（“day sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/day sky background.jpg”）；
}
}
否则，如果（小时数>=22和小时数<24）{
if（$（（“body”）.css（“background image”）.indexOf（“day sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/day sky background.jpg”）；
}
}
否则{
if（$（（“body”）.css（“background image”）.indexOf（“day sky background.jpg”）=-1）{
$（“body”）.css（“background image”，“images/day sky background.jpg”）；
}
}
}, 1000);

背景图像

应该是

url（images/day sky background.jpg）

（您缺少

url（…）

）

您可以简单地与jQuery结合使用以实现您的目标，否则无需执行分支

编辑：

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
}

函数背景（）{
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”，
“图片/day-sky-background9.jpg”
],
len=imgs.长度，
idx=-1；
setInterval（函数（）{
var hours=新日期（）.getHours（）；
$（“#小时”）.html（（小时<10？：“）+小时）；
idx=（idx+1）%len；
如果（小时数>=5和小时数<7）{
idx=1；
}否则，如果（小时数>=7和小时数<8）{
idx=2；
}否则，如果（小时数>=8和小时数<9）{
idx=3；
}否则，如果（小时数>=9和小时数<11）{
idx=4；
}否则，如果（小时数>=11和小时数<14）{
idx=5；
}否则，如果（小时数>=14和小时数<18）{
idx=6；
}否则，如果（小时数>=18和小时数<22）{
idx=7；
}
$（“body”）.css（“背景”，“#000 url”（“+imgs[idx]+”））；
}，60*60*1000）；//每小时打一次电话
}

你能提供一个提琴吗？虽然你的代码确实包含了将修复代码的

url（）

部分，但这确实极大地改变了功能。您只是每小时循环浏览一次图像，总是从第一个图像开始，而不管一天中的什么时间，并且假设用户希望图像分布均匀。更改将发生在调用

setInterval

后的小时数，而不是实际小时数更改时，以及其写入方式，无法增加到OP使用的第二精度，因为图像的更改取决于时间间隔。在典型的网站中，这实际上将始终显示

imgs[0]

@DavidHedlund的任何内容，感谢您的建议，答案已相应更新。