根據時間和日期更改網頁上的圖像

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