Change of image after a time interval

Question

I want to write a javascript function to change background image after every 24 hours for 30 days.

For example, I have 4 images, image1.jpg, image2.jpg, image3.jpg and image4.jpg.

I want image1.jpg to be displayed on Monday. Then by midnight I want to swap automatically to image2.jpg and so on.

I was thing to use a java script function like this

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]

Now my question is that how to change automatically image after 24hours. If I use a for loop to increment the counter to change the image will it work. And is it correct way to do this and if i am using this way Is the timer will maintain the previous counter value.

I want that every day at 9:00 am the background image will change.

Do you expect your users to stay on your page for a week without closing their browser? — Darin Dimitrov, Sep 03 '11 at 13:19
observably not, Thats why i am asking about idea how to achieve.. — Soarabh, Sep 03 '11 at 13:22
@saorabh, that will depend on what server side language you are using as this task should be done on the server and not using javascript. — Darin Dimitrov, Sep 03 '11 at 13:23
@Darin Thanks I was thinking the same but just post here for a confirmation now will try to do this using server side language. — Soarabh, Sep 03 '11 at 13:26

score 2 · Answer 1 · answered Sep 03 '11 at 13:51

This should be a server side task. However if you must use JavaScript then...

Put this in the section of your page or as an external script file.

<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>

Put this in the html page at the location you want the image to appear.

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

can someone please explain what is the logic of this part: "/ 86400 / 1000) | 0)". 86400 I know that are the seconds in a day, but what about 1000 and 0? — George, Oct 01 '12 at 17:31
1000 because the value is in milliseconds not seconds. The `| 0` truncates the value similar to Math.floor(). It isn't quite that simple so have a read of [this](http://stackoverflow.com/questions/7487977/using-bitwise-or-0-to-floor-a-number). — diolemo, Oct 02 '12 at 05:11

score 1 · Answer 2 · answered Sep 03 '11 at 13:30

I'd suggest setting a timeout for no more than every minute. In the timeout, check the date, and if has changed, then get the image from the list, and then write the new url to the appropriate place in the document. At the end of the timeout, always start the next timeout. No for loop would be necessary.

Change of image after a time interval

2 Answers2