基于TOD错误使用Javascript更改背景图像？

Question

我正在尝试使用javascript对基于一天中的时间进行背景更改的网页进行编码。我知道还有其他问题基于这个概念，但我的代码，基于这些问题的答案，不会产生结果。

var background = ","
var time = new Date();
var greeting = '';
var hour = time.getHours();
   if (hour < 6 || hour === 12) {
      greeting = "Goodnight!";
        background = 'assignment02_images/backgrounds/night.png';
     }
     else if (hour >= 6 && hour <12) {
      greeting = "Good Morning!";
        background = 'assignment02_images/backgrounds/morning.png';
    }
    else if (hour >=12 && hour < 18 ) {
      greeting = "Good Afternoon!";
        background = 'assignment02_images/backgrounds/afternoon.png';
    }
    else {
      greeting = "Good Evening!";
        background = 'assignment02_images/backgrounds/evening.png';
    }

问候变量有效，这就是为什么我认为背景图像也应该如此。但是，我不知道我需要在document.write（）中放置什么才能显示背景。目前，这只是显示白色背景。

Answer 1

<div class="bg" id="bgImg"></div>

在你的scriipt文件中

var dt = new Date()

setTimeout(function() {
    console.log(dt.getHours())
    if (dt.getHours() >= 1 && dt.getHours() <= 6) {
        document.getElementById("bgImg").style.backgroundImage = "url('https://dummyimage.com/300x200/345fa1/fff')"
    } else if (dt.getHours() >= 6 && dt.getHours() <= 12){
        document.getElementById("bgImg").style.backgroundImage = "url('https://dummyimage.com/300x200/a13557/fff')"
    }
}, 30)

只需检查几小时之间的时间并将其添加到超时

Fiddle Example