一段时间后图像的变化答案

【问题标题】：Change of image after a time interval一段时间后图像的变化
【发布时间】：2011-11-09 17:40:21
【问题描述】：

我想编写一个 javascript 函数来在 30 天内每 24 小时更改一次背景图像。

例如，我有 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:00 改变背景图像。

【问题讨论】：

您是否希望用户在不关闭浏览器的情况下停留在您的页面上一周？
这应该是服务器端任务。
显然不是，这就是为什么我要询问如何实现的想法..
@saorabh，这将取决于您使用的服务器端语言，因为此任务应在服务器上完成，而不是使用 javascript。
@Darin 谢谢我也是这么想的，但只是在这里发帖确认现在将尝试使用服务器端语言来做到这一点。

标签： javascript jquery

【解决方案1】：

这应该是服务器端任务。但是，如果您必须使用 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>

【讨论】：

谁能解释一下这部分的逻辑是什么：“/86400 / 1000) | 0)”。 86400 我知道那是一天中的秒数，但是 1000 和 0 呢？
1000 因为该值以毫秒而不是秒为单位。 | 0 截断类似于 Math.floor() 的值。没那么简单，请阅读this。

【解决方案2】：

我建议将超时设置为不超过每分钟。在超时时，检查日期，如果有变化，则从列表中获取图像，然后将新的 url 写入文档中的适当位置。在超时结束时，总是开始下一个超时。不需要 for 循环。

【讨论】：