时间间隔后图像的变化

我想编写一个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

时间间隔后图像的变化

回答

相关问题