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

Question

I'm working on a webpage and I require some help with the JavaScript.我正在处理一个网页，我需要一些 JavaScript 方面的帮助。
The site should be able to load a full-screen image that changes depending on the time and date.该站点应该能够加载根据时间和日期而变化的全屏图像。
To be exact there are weekday shows and weekend shows and this page is required to project the show's poster depending on what time and day it is.确切地说，有工作日节目和周末节目，并且需要此页面根据时间和日期来投影节目的海报。

My current code looks like this;我当前的代码如下所示；

HTML 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 CSS

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

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

Javascript 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);

As you can see I tried setting a specific resolution in CSS but I want it to change depending on the platform.如您所见，我尝试在 CSS 中设置特定分辨率，但我希望它根据平台进行更改。 Also, in the JavaScript I wanted it to be more specific but I got stuck.此外，在 JavaScript 中，我希望它更具体，但我被卡住了。

Thanks in advance.提前致谢。

Answer 1

Instead of img.src.indexOf('Kiss') < 0 , try - if (!img) .而不是img.src.indexOf('Kiss') < 0 ，尝试 - if (!img) 。
Use the Conditional (ternary) operator to get rid of if-else.使用条件（三元）运算符摆脱 if-else。
Finally, if you want a full-screen image, give it full width and auto height.最后，如果你想要一个全屏图像，给它全宽和自动高度。

Below is a working snippet.下面是一个工作片段。 You should see that according to the condition the image will be updated after 5 seconds.您应该看到根据条件图像将在 5 秒后更新。 (I tried random images, you can use your own.) （我试过随机图片，你可以使用你自己的。）

 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