時間間隔後圖像的變化

我想編寫一個javascript函數以在每24小時後更改背景圖像30天。時間間隔後圖像的變化

例如，我有4張圖片，image1.jpg，image2.jpg，image3.jpg和image4.jpg。

我希望image1.jpg在週一顯示。然後到午夜，我想自動交換到image2.jpg等。

我是使用Java腳本函數這樣

function changeImg() { 
var now = new Date(), 
    hours=now.getHours(), 
    minutes=now.getMinutes(), 
    seconds=now.getSeconds(), 
    dayD=now.getDate(), 
    dayM=now.getMonth()+1, 
    datY=now.getFullYear(), 
    timer = setTimeout("changeImg()",200); 
} 

var imgArray = new imgArr[xyz.png,abc.png,........,30.png]

事情現在我的問題是，如何24小時後自動改變形象。如果我使用for循環來增加計數器以更改圖像，它將起作用。這是否是正確的方法來做到這一點，如果我用這種方式是計時器將保持以前的計數器值。

我希望每天早上9點都會改變背景圖像。

來源

2011-09-03 Soarabh

你希望你的用戶留在你的頁面了一個星期就沒有關閉瀏覽器？ –

這應該是一個服務器端任務。 – user278064

顯然不是，這就是爲什麼我問的想法如何實現.. – Soarabh

我建議設置超時不超過每分鐘。在超時時間內，檢查日期，如果已更改，則從列表中獲取圖像，然後將新的URL寫入文檔中的相應位置。在超時結束時，始終啓動下一個超時。不需要for循環。

來源

2011-09-03 13:30:55

這應該是一個服務器端任務。但是，如果您必須使用JavaScript，那麼...

將其放入您的頁面部分或作爲外部腳本文件。

<script> 

function render_image() { 
    var images = [ 
     '00001.jpg', 
     '00002.jpg', 
     '00003.jpg', 
     '00004.jpg', 
     '00005.jpg', 
     '00006.jpg',   
    ] 

    // define the start date (alter this) 
    var first = new Date("2011-09-03"); 

    // which image 
    var src = images[ 
     // count days since start (int) 
     (((new Date().getTime() - first.getTime()) 
     /86400/1000) | 0) 
     % images.length 
    ]; 

    // create image element 
    var im = document.createElement('img'); 
    im.src = src; 

    // return code 
    var di = document.createElement('div'); 
    di.appendChild(im); 
    return di.innerHTML; 
} 

</script>

你想要的形象出現的位置將這個HTML頁面。

<script> document.write(render_image()); </script>

來源

2011-09-03 13:51:17 diolemo

有人可以請解釋這部分的邏輯是什麼：「/ 86400/1000）| 0）」。 86400我知道那是一天中的秒數，但1000和0呢？ – George

1000因爲該值以毫秒爲單位而不是秒。 '| 0'截斷類似於Math.floor（）的值。這不是那麼簡單，所以閱讀[this]（http://stackoverflow.com/questions/7487977/using-bitwise-or-0-to-floor-a-number）。 – diolemo

時間間隔後圖像的變化

回答

相關問題