Question

我有一些代码应该根据一天中的小时改变背景。这将在我自己的家里一直运行，所以我需要帮助让它工作并每隔5分钟左右刷新一次。我认为它应该如何工作是它将看看它是什么时间，遵循一些逻辑然后写出下一行作为

你能帮助我找出它为什么不起作用以及如何解决它？我是编码的新手，不知道很多。

编辑：我不知道错误是什么，它只是不改变背景，它保持白色

<script type="text/javascript">
    var now = new Date();
    var hours = now.getHours();

    //Place this script in your HTML heading section

    //1-2am
    if (hours >= 1 && hours < 3){
    document.write(<body background="11.png">);
    }
    //3-4am
    else if (hours >= 3 && hours < 5){
    document.write(<body background="12.png">);
    }
    //5-6am
    else if (hours >= 5 && hours < 7){
    document.write(<body background="1.png">);
    }
    //7-8am
    else if (hours >= 7 && hours < 9){
    document.write(<body background="2.png">);
    }
    //9-10am
    else if (hours >= 9 && hours < 11){
    document.write(<body background="3.png">);
    }
    //11-12pm
    else if (hours >= 11 && hours < 13){
    document.write(<body background="4.png">);
    }
    //1-2Pm
    else if (hours >= 13 || hours < 15){
    document.write(<body background="5.png">);
    }
    //3-4pm
    else if (hours >= 15 && hours < 17){
    document.write(<body background="6.png">);
    }
    //5-6pm
    else if (hours >= 17 && hours < 19){
    document.write(<body background="7.png">);
    }   
    //7-8 pm
    else if (hours >= 19 && hours < 21){
    document.write(<body background="9.png">);
    }       
    //10-12am
    else {
    document.write(<body background="10.png">);
    }
    </script>

Answer 1

<script type="text/javascript">
function changeBg() {
    var now = new Date();
    var hours = now.getHours();

    //based on hours it will dynamically change the image
        //1.png, 2.png, ..., 23.png
        document.body.style.backgroundImage ="url('" + hours + ".png')"

 }
changeBg();
 setInterval(function(){ changeBg(); }, 300000); //300000 means 5 min
</script>

Answer 2

您可以动态更改背景。注意带有时间和相应图像名称的模式。您可以将一个映射到另一个，以便将代码缩短相当多。另外，我建议不要一遍又一遍地编写body标签，而是更改body标签的CSS背景。

当然，此代码只执行一次，因此您需要以固定的时间间隔调用它，以便它能够按时更新。您可以使用setInterval。此函数将回调函数作为第一个参数，以及您希望间隔时间的毫秒数。由于背景仅每两小时更改一次，因此您可以每分钟执行一次该功能。一分钟（毫秒）为1 * 60 * 1000;

setInterval(function() {
    var now = new Date();
    var hours = now.getHours();
    var imgName = (Math.floor((hours + 23) / 2) + 10) % 12 + 1;

    //Place this script in your HTML heading section
    document.body.style.backgroundColor = "red";
    document.body.style.backgroundImage = imgName + ".png";
}, 60 * 1000);

根据一天中的小时更改背景图像

2 个答案: