www.webdeveloper.com
Results 1 to 7 of 7

Thread: Javascript to change image once a week?

  1. #1
    Join Date
    Jul 2009
    Posts
    23

    Exclamation 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'>");

    }

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Do you know what images you want to show for each week?
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Jul 2009
    Posts
    23
    Quote Originally Posted by Declan1991 View Post
    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,

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    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.
    Great wit and madness are near allied, and fine a line their bounds divide.

  5. #5
    Join Date
    Jul 2009
    Posts
    23
    Quote Originally Posted by Declan1991 View Post
    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?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,262

    Exclamation 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

  7. #7
    Join Date
    Aug 2007
    Posts
    3,767
    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)&#37;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.
    Great wit and madness are near allied, and fine a line their bounds divide.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles