按當前時間更改圖片

我有兩個圖像。我想顯示一個圖像，如果它的一天，另一個圖像，如果它晚上。這應該使用JavaScript來完成。例如，從8:00到00:00顯示一個圖像，從00:00到8:00顯示另一個圖像。這可能使用JavaScript？按當前時間更改圖片

2010-07-08 King Julien

爲什麼要用Javascript？你可以使用服務器端語言嗎？ – 2010-07-08 11:13:48

您可以使用經常運行的setInterval()。您想要的精度取決於您。

在這個例子中，它運行的每一分鐘：

HTML

<img id='theImage' src='images/day.jpg' />

的JavaScript

 // setInterval makes the code run every xx milliseconds 
     // if you just want it to run, delete this top line, 
     // and the last line 
setInterval(function() { 

     // Create a new Date object with the current date/time 
    var date = new Date(); 

     // Get a reference to the image in the HTML using its ID attribute 
    var img = document.getElementById('theImage'); 

     // getHours() gets the hour of the day from 0 - 23, 
     // so the way it is set up, if the hour is less 
     // than 8, the first block will run, otherwise 
     // the second block will run 
    if (date.getHours() < 8) { 

       // This simply checks the src attribute of the image to see 
       // if it already contains the word "night". That way we 
       // don't update the src unless we need to. 
       // You could also eliminate this check if you're not going 
       // to use setInterval. 
     if(img.src.indexOf('night') < 0) { 

         // So if the hour is less than 8, and the 
         // src did not contain "night", then we need 
         // to change the src to the "night" image. 
      img.src = 'images/night.jpg' 
     } 
    } else { 
       // Same as above, only it executes if the hour was greater 
       // than 8. 
       // Again, you could eliminate the check for the word 
       // "day" if you're not going to use setInterval. 
     if(img.src.indexOf('day') < 0) { 
      img.src = 'images/day.jpg' 
     } 
    } 
    // Run the setInteval every 60000 milliseconds 
    // Delete this line as well if you're not using setInterval 
},60000);

可以擺脫setInterval()的，如果你不需要它改變時，時鐘改變。（只發生一天兩次，所以setInterval()可能是矯枉過正。）

如果是這樣的話，只需刪除第一行和最後一行。然後它會在頁面加載時運行。

編輯：從你的評論，如果你要的時間間隔從15:00改爲16:00（反之亦然），你只需更改測試小時，這個if()：

if(date.getHours() < 15 || date.getHours() >= 16) { 
     // set one image 
} else { 
     // set the other image 
}

編輯：要修改的不是圖像的src一個div的類，這樣做：

更改getElementById()行指向你的<div>，如：

var div = document.getElementById('theDiv');

然後更新，而不是src的className屬性，如：

div.className = "someNewClass";

請注意，這將覆蓋整個階級屬性，所以如果你的元素有幾個類，我們需要更加小心添加/刪除類。

如果要保持所測試的圖像，看它是否已經有了合適的圖像，那麼你會做的DIV類似代碼：

if(div.className.indexOf('someUniqueWord') < 0) {...

同樣，你也不需要做這些檢查。它只是使得元素是而不是，除非絕對必要。

來源

2010-07-08 11:10:31 user113716

由於我對javascript不熟悉，這段代碼對我來說似乎有點複雜......如果間隔時間爲15:00至16:00和16:00至15:00，應如何更改此代碼。謝謝 – 2010-07-08 11:45:14

@Levani - 對不起，我會添加一些意見澄清。 – user113716 2010-07-08 12:00:39

謝謝。有沒有辦法改變div類而不是圖像？ – 2010-07-08 12:35:49

如果你給圖像一個ID，那麼你可以根據用戶瀏覽器的時間修改它的src屬性。

來源

2010-07-08 11:02:46

var img = document.createElement('img'); 
calcSrc(); 
setInterval(calcSrc, 60000); 

document.body.appendChild(img); // place image 

function calcSrc() { 
    img.src = new Date().getHours() < 8 ? 'night.jpg' : 'day.jpg'; 
}

來源

2010-07-08 11:12:30 James

我是你的代碼中，J-P

calcSrc的幾件事情，沒有引號，括號，例如頗爲驚訝'calcSrc（）'
img在放置在文檔中後保持其處理。

例如

<html> 
<head> 
<script> 

var img,tid; 
window.onload=function() { 
    img = document.createElement('img'); 
    calcSrc(); 
    tId=setInterval(calcSrc, 60000); 
    document.body.appendChild(img); // place image 
} 

var day = 'day.jpg' 
var night = 'night.jpg' 


function calcSrc() { 
    img.src = (new Date.getHours()<8)?night:day; 
} 
</script> 
</head> 
<body> 
</body> 
</html>

來源

2010-07-08 12:33:41 mplungjan

按當前時間更改圖片

回答

相關問題