Javascript to change image once a week?

Printable View

07-12-2009, 04:20 PM
djstrictlylegit

Javascript to change image once a week?

Hello all,

I need to write a script that changes an image once a week on the same day every week (for instance, every sunday).

So far I have written code that changes the image on the correct day but it only shows the image on the Sunday (as that's the only thing I can figure out at the moment).

Any help would be HUGELY appreciated!

Thank you in advance.

This is what my current code looks like:

var d = new Date()

var date = d.getDate()

var dow = new Array('sunday','monday','tuesday','wednesday','thursday','friday','saturday');

var dayd = d.getDay();

var weekday = dow[dayd]

if (date >= 1 && date <= 8 && weekday == "sunday")

{

document.write("<IMG SRC='image1.jpg'>");

}

else if (date >= 9 && date <= 16 && weekday == "sunday")

{

document.write("<IMG SRC='image2.jpg'>");

}

else if (date >= 17 && date <= 24 && weekday == "sunday")

{

document.write("<IMG SRC='image3.jpg'>");

}

else

{

document.write("<IMG SRC='image4.jpg'>");

}
07-12-2009, 05:32 PM
Declan1991

Do you know what images you want to show for each week?
07-12-2009, 05:47 PM
djstrictlylegit

Quote:

Originally Posted by Declan1991

Do you know what images you want to show for each week?

I do indeed, there are four images in total and I would like the image to change every Sunday. The first week of each month I would like image 1 to show, the second week, image 2 to show, the third week image 3 and the fourth week image 4, then it would start at image 1 again.

Week 1 - image1.jpg
Week 2 - image2.jpg
Week 3 - image3.jpg
Week 4 - image4.jpg
Week 5 - image1.jpg
Week 6 - image2.jpg

etc...

Any help you could offer would be greatly appreciated.

Thanks,
07-12-2009, 06:18 PM
Declan1991

Code:

document.write('<img src="image'+Math.ceil((new Date()).getDate()/7)+'.jpg">');

That is based on the month, so that the first to the seventh of any month will be image1, all the way up to image five, from the 29th to 31st. For example, today and tomorrow are image2, the day after is image3.

Changing every week regularly is far more complicated.
07-12-2009, 06:33 PM
djstrictlylegit

Quote:

Originally Posted by Declan1991

Code:

document.write('<img src="image'+Math.ceil((new Date()).getDate()/7)+'.jpg">');

That is based on the month, so that the first to the seventh of any month will be image1, all the way up to image five, from the 29th to 31st. For example, today and tomorrow are image2, the day after is image3.

Changing every week regularly is far more complicated.

Thank's for getting back to me.

The only thing is, each image is a different part of a cleaning rota which will need to be scheduled to change on a particular day in the week.

Is it not possible for the image to change on the same day of each week?
07-12-2009, 07:43 PM
JMRKER

Consider this ...

You can try to add some logic to this to use some sort of year offset
to determine when change over image display is to occur.

This worked fine for me but I did not have the requirement to change on a particular day!

Code:

<html> <head> <title>Week of Year Function</title> <script type="text/javascript"> // For: http://www.webdeveloper.com/forum/showthread.php?t=212935 function WeekOfYear(DateOfYear) { // expected format mm/dd/yyyy var ArrayInfo = []; var tmp = DateOfYear.split('/'); var nd = new Date(tmp[2],(tmp[0]-1),tmp[1]); var dow = nd.getDay(); var bd = new Date(tmp[2],0,1); var bdow = bd.getDay(); var df = (nd-bd)/(1000*60*60*24); // get difference in days var woy = Math.floor(df / 7); return woy; } /* Limitations of above function Considers weeks a 7 days, but days of the week are Sunday = 0 thru Saturday = 6 So first week (#0) may consists of 1-7 days And because of overlap of 366 (leap years) divided by 7 ( = 52.2857) there may be actually 53 weeks in the year if you don't adjust for the uneven days of the first week of the year */ var ImageArray = [ 'Wk0', 'Wk1', 'Wk2', 'Wk3', 'Wk4', 'Wk5', 'Wk6', 'Wk7', 'Wk8', 'Wk9', 'Wk10','Wk11','Wk12','Wk13','Wk14','Wk15','Wk16','Wk17','Wk18','Wk19', 'Wk20','Wk21','Wk22','Wk23','Wk24','Wk25','Wk26','Wk27','Wk28','Wk29', 'Wk30','Wk31','Wk32','Wk33','Wk34','Wk35','Wk36','Wk37','Wk38','Wk39', 'Wk40','Wk41','Wk42','Wk43','Wk44','Wk45','Wk46','Wk47','Wk48','Wk49', 'Wk50','Wk51','Wk52','Wk53' ]; </script> </head> <body> <input type="text" id="DOY" value="08/16/2009"> <button onclick="WOY=WeekOfYear(document.getElementById('DOY').value); alert('Week: '+WOY+'\nDisplays: '+ImageArray[WOY]+'.jpg')"> Calculate Week of Year</button> <select onchange="if (this.value != '') { WOY=WeekOfYear(this.value); alert('Week: '+WOY+'\nDisplays: '+ImageArray[WOY]+'.jpg')}"> <option value=""></option> <option value="1/1/2009">1/1/2009</option> <option value="2/1/2009">2/1/2009</option> <option value="3/1/2009">3/1/2009</option> <option value="4/1/2009">4/1/2009</option> <option value="5/1/2009">5/1/2009</option> <option value="6/1/2009">6/1/2009</option> <option value="7/1/2009">7/1/2009</option> <option value="8/1/2009">8/1/2009</option> <option value="9/1/2009">9/1/2009</option> <option value="10/1/2009">10/1/2009</option> <option value="11/1/2009">11/1/2009</option> <option value="12/1/2009">12/1/2009</option> <option value="12/31/2009">12/31/2009</option> </select> </body> </html>

Let us see what you might come up with :)
07-12-2009, 07:51 PM
Declan1991

The whole expression below generates 1 from Sat. to Fri., 2 the next Sat., 3 the Sat. after that, 4 the Sat. after that, and back to 1 then. Every seven days, it changes. If you want to speed it up a tiny little bit, multiply out 60000*60*24*7 and put in the actual value for it.

Code:

(Math.floor(((new Date()).getTime())/(60000*60*24*7)%4)+1)

It's probably possible to get it to change on a day other than Saturday, for example, if you change the Math.floor, to Math.ceil, I think it'll change on a Sunday instead.