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

Question

我正在处理一个网页，我需要一些 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 中，我希望它更具体，但我被卡住了。

提前致谢。

Answer 1

而不是img.src.indexOf('Kiss') < 0 ，尝试 - if (!img) 。
使用条件（三元）运算符摆脱 if-else。
最后，如果你想要一个全屏图像，给它全宽和自动高度。

下面是一个工作片段。 您应该看到根据条件图像将在 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-13 09:59:12

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-13 09:59:12

解决方案1
1 已采纳 2022-12-13 09:59:12