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';
    }

greeting变量有效，这就是为什么我认为背景图像也应该如此。但是，我不知道需要放入document.write（）来显示背景。当前，它仅显示白色背景。

Answer 1

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

在抄写文件中

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

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

1 个答案: