如何将根据一天中的时间变化的 JavaScript 图像设置为背景？

Question

我的 HTML 有一个 id="image_1" 的标签。我的 JavaScript 函数告诉一天中的时间，并根据一天中的时间在三个图像之间变化。我希望图像显示为我的背景。

我试着弄乱 DOM 操作背景属性。
我试过使用 CSS 使图像/图像显示为背景。

所有导致图像保持不变，没有效果。

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Clock & Greeting</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="Clock.css" />
  </head>
  <body onLoad="startTime();">
    <div id="greeting"></div>

    <div id="txt"></div>

    <img src="" alt="" id="image_1" />

    <script src="Clock.js" async defer></script>
  </body>
</html>

    const greeting = document.getElementById("greeting");
    const welcomeTypes = ["Good Morning", "Good Afternoon", "Good evening"];
    const hour = new Date().getHours();
    
    function startTime() {
      const today = new Date();
      let h = today.getHours();
      let m = today.getMinutes();
      let s = today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
      setTimeout(startTime, 1000);
    }
    
    function checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }
    
    let welcomeTxt = "";
    
    if (hour < 12) welcomeTxt = welcomeTypes[0];
    else if (hour <= 18) welcomeTxt = welcomeTypes[1];
    else welcomeTxt = welcomeTypes[2];
    
    greeting.innerHTML = welcomeTxt;
    
var day = new Date();
var today = parseInt(day.getDay());
var hours = parseInt(day.getHours());
var minutes = parseInt(day.getMinutes());
var imgElem = document.getElementById("image_1");

(function () {
  if (today >= 0 && today <= 6) {
    if (hours < 12) {
      imgElem.src =
        "https://media.istockphoto.com/id/1332712244/photo/sunrise-over-misty-fields-of-corn.jpg?s=612x612&w=0&k=20&c=Ahdwy0nHLDDxMPA5Q9D6bUBykhjixiqVWFvsiX9E6aE=";
    } else if (hours <= 18) {
      imgElem.src =
        "https://media.istockphoto.com/id/141467949/photo/beach-at-bamburgh-northumberland-uk.jpg?s=612x612&w=0&k=20&c=5kfMaNJIVWffH629lmkxjt6uXx58fQyxPtf2w4rhhs8=";
    } else {
      imgElem.src =
        "https://media.istockphoto.com/id/1432902897/photo/the-star-shines-on-the-christmas-eve-of-jesus-christ.jpg?s=612x612&w=0&k=20&c=DLHO1CgZ8yqwy2S5hx_jopHOSh6OE_ew0oZUxW1ivmo=";
    }
  }
})();

Answer 1

在您当前的实现中，当脚本加载后立即执行时，您只更新一次背景图像。

要动态改变背景，需要检查是否需要重复更新背景，例如像这样：

function updateBackground() {
    var day = new Date();
    var today = day.getDay();
    var hours = day.getHours();
    var imgElem = document.getElementById("image_1");
    if (today >= 0 && today <= 6) {
        if (hours < 12) {
            imgElem.src =
                "https://media.istockphoto.com/id/1332712244/photo/sunrise-over-misty-fields-of-corn.jpg?s=612x612&w=0&k=20&c=Ahdwy0nHLDDxMPA5Q9D6bUBykhjixiqVWFvsiX9E6aE=";
        } else if (hours <= 18) {
            imgElem.src =
                "https://media.istockphoto.com/id/141467949/photo/beach-at-bamburgh-northumberland-uk.jpg?s=612x612&w=0&k=20&c=5kfMaNJIVWffH629lmkxjt6uXx58fQyxPtf2w4rhhs8=";
        } else {
            imgElem.src =
                "https://media.istockphoto.com/id/1432902897/photo/the-star-shines-on-the-christmas-eve-of-jesus-christ.jpg?s=612x612&w=0&k=20&c=DLHO1CgZ8yqwy2S5hx_jopHOSh6OE_ew0oZUxW1ivmo=";
        }
    }
}

setInterval(updateBackground, 1000);

如何将根据一天中的时间变化的 JavaScript 图像设置为背景？

问题描述投票：0回答：1

1个回答

最新问题

如何将根据一天中的时间变化的 JavaScript 图像设置为背景？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1