根据时间和日期更改网页上的图像答案

【问题标题】：Change Image on web page depending on time and date根据时间和日期更改网页上的图像
【发布时间】：2022-12-15 13:03:55
【问题描述】：

我正在处理一个网页，我需要一些有关 javascript 的帮助。该站点应该能够加载根据时间和日期而变化的全屏图像。确切地说，有工作日节目和周末节目，并且需要此页面根据时间和日期来投影节目海报。我当前的代码如下所示；

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <title>IMAGE LOOP!</title>
    </head>

    <body>
        <script type="text/javascript" src="app.js" ></script>
        <img id='Kiss100' src="images/4.png">
    </body>
</html>

CSS

body {
    background-image:linear-gradient(white, dimgray);
}

img {
  border-radius: 4px;
  padding: 5px;
  width: 2560px;
  height: 720px;
  object-fit: fill;
}

Javascript

setInterval(function() {

    var date = new Date();

    var img = document.getElementById('Kiss100');

    if (date.getHours() < 12) {
        if( img.src.indexOf('Kiss') < 0 ) {
            img.src = 'images/3.jpeg'
        }
    } else {
        if( img.src.indexOf('Kiss100') < 0 ) {
            img.src = 'images/1.jpeg'
        }
    }

},60000);

希望尽快提供反馈。提前致谢。

如您所见，我尝试在 css 中设置特定的分辨率，但我希望它根据平台和 javascript 进行更改，我希望它更具体，但我卡住了，请帮忙...

【问题讨论】：

标签： javascript html css

【解决方案1】：

代替img.src.indexOf('Kiss') < 0，试试-if (!img)。
使用 Conditional (ternary) operator 摆脱 if-else。

最后，如果您想要全屏图像，请为其指定全宽和自动高度。

下面是一个工作 sn-p。您应该看到根据条件图像将在 5 秒后更新。（我试过随机图片，你可以使用你自己的。）

setInterval(function () {
  var imgEl = document.getElementById('Kiss100');
  if (!imgEl) return;
  
  var date = new Date();
  
  imgEl.src = date.getHours() < 12 
  ? 'https://source.unsplash.com/user/c_v_r/100×100' 
  : 'https://www.kasandbox.org/programming-images/avatars/cs-hopper-happy.png'

}, 5000);

body {
    background-image:linear-gradient(white, dimgray);
}

img {
  width: 100%;
  height: auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>IMAGE LOOP!</title>
  </head>
  <body>
    <script type="text/javascript" src="app.js" ></script>
    <img id='Kiss100' src="https://www.gstatic.com/webp/gallery3/1.sm.png">
  </body>
</html>

【讨论】：