Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Looking for help with a repeating weekly Javascript countdown

    I am very new to Javascript and I am hopeful someone can help me with this issue.

    I am trying to create a weekly countdown timer that will countdown until a certain date and time in the week (Friday at 4 PM EST). Once that date is reached I would like to have the counter reset automatically and once the date and time is reached I would like to have the counter show the remaining time until the next 4 PM on Friday.

    I would like to be able to show how many days, hours, minutes, and seconds are left between the current time and set time.

    I have found some code on this site already and I have started to modify it to try and achieve what I am after but I am running into issues. I can not get my day calculation to work as well as figure out how to change the end date that the timer counts down until.

    I had thought about calculating the seconds left until that date and subtracting the current time (seconds) from that number to give me a time value, but I'm not sure if that is the best practice?

    Any help would be greatly appreciated.

    Here is my code:

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function getSeconds() {
    var now = new Date();
    var time = now.getTime(); // time now in milliseconds
    var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,15,0); // midnight 0000 hrs
    // midnight - change time hh,mm,ss to whatever time required, e.g. 9,15,0 (0915)
    var ft = midnight.getTime() + 86400000 + 43200000; // add one day 12 hours
    var offset = now.getTimezoneOffset(); // local time in minutes vs GMT
    offset = offset * 60000; // milliseconds
    ft = ft + offset;
    var diff = ft - time;
    diff = parseInt(diff/1000);
    if (diff > 129600) {diff = diff - 129600}
    startTimer (diff);
    }
    
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()",1000);
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs>0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    //getSeconds(); // and start again if required
    }
    var days = Math.floor(secs/864000);
    secs %= 86400;
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    var result =  + days + " days " + ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
    + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds ";
    document.getElementById("countdown").innerHTML = result;
    }
    
    
    </script>
    
    </head>
    
    <body onload = "getSeconds()">
    
    <span id="countdown" style="font-weight: bold;"></span>
    
    </body>
    </html>
    Last edited by legaz88; 02-08-2012 at 08:07 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    See changes in RED...
    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=187335&highlight=countdown+timer  post #2
    
    function getSeconds() {
      var now = new Date();
      var time = now.getTime();  // time now in milliseconds
      var ctime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),16,0,0); // 4 pm
    // ctime - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    
      var cday = 5-now.getDay() + 1;  // number of days until Friday
      var ft = ctime.getTime() + (86400000*cday);  // add # days to Friday
    
      var diff = ft - time;  
      diff = parseInt(diff/1000);
      if (diff > 86400) {diff = diff - 86400}
      startTimer (diff);
    }
    
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
      timeInSecs = parseInt(secs);
      ticker = setInterval("tick()",1000); 
      tick(); // to start counter display right away
    }
    
    function tick() {
      var secs = timeInSecs;
      if (secs>0) { timeInSecs--; } else { clearInterval(ticker); }  // stop counting at zero
    //  getSeconds();  // and start again if required
    
      var days = Math.floor(secs/86400);
      secs %= 86400;
    
      var hours= Math.floor(secs/3600);
      secs %= 3600;
      var mins = Math.floor(secs/60);
      secs %= 60;
      var result = days +' day(s) ';
          result += ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                    + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
      document.getElementById("countdown").innerHTML = "Next update will be in " + result;
    }
    </script>
    </head>
    
    <body onload = "getSeconds()">
    <span id="countdown" style="font-weight: bold;"></span>
    </body>
    </html>
    You will probably need to uncomment the GREEN line above as well.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Well, you definitely need to uncomment the line in green, but it's in the wrong place.

    Code:
      if (secs>0) 
      { 
          timeInSecs--; 
      } else { 
         clearInterval(ticker); // stop counting at zero
         getSeconds();  // and start all over again!
     }
    No?

    legaz had that part right in his original code.
    Last edited by Old Pedant; 02-09-2012 at 06:54 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Unhappy

    Quote Originally Posted by Old Pedant View Post
    Well, you definitely need to uncomment the line in green, but it's in the wrong place.

    Code:
    ...
    No?

    legaz had that part right in his original code.
    You're right.
    I moved the '}' without thinking of the consequences.

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much for the help. I added the if/else statement over top of the existing comment in green but I noticed a bug when the counter resets. I set my system time to 4 PM on a Friday and when the time is reached, the counter resets to 0 day(s) 23 hours 59 minutes 59 seconds when I think it should be resetting to 6 day(s) 23 hours 59 minutes 59 seconds, since it will be counting down from a new week until the next Friday at 4 PM.

    I'm not sure how this line would change:

    var cday = 5-now.getDay() + 1; // number of days until Friday

    Here is what I have:

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    // From: Need countdown timer to reset daily  post #2
    
    function getSeconds() {
      var now = new Date();
      var time = now.getTime();  // time now in milliseconds
      var ctime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),16,0,0); // 4 pm
    // ctime - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    
      var cday = 5-now.getDay() + 1;  // number of days until Friday
      var ft = ctime.getTime() + (86400000*cday);  // add # days to Friday
    
      var diff = ft - time;  
      diff = parseInt(diff/1000);
      if (diff > 86400) {diff = diff - 86400}
      startTimer (diff);
    }
    
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
      timeInSecs = parseInt(secs);
      ticker = setInterval("tick()",1000); 
      tick(); // to start counter display right away
    }
    
    function tick() {
      var secs = timeInSecs;
      if (secs>0) 
      { 
          timeInSecs--; 
      } else { 
         clearInterval(ticker); // stop counting at zero
         getSeconds();  // and start all over again!
     }
    
      var days = Math.floor(secs/86400);
      secs %= 86400;
    
      var hours= Math.floor(secs/3600);
      secs %= 3600;
      var mins = Math.floor(secs/60);
      secs %= 60;
      var result = days +' day(s) ';
          result += ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                    + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
      document.getElementById("countdown").innerHTML = "Next update will be in " + result;
    }
    </script>
    </head>
    
    <body onload = "getSeconds()">
    <span id="countdown" style="font-weight: bold;"></span>
    </body>
    </html>
    Last edited by legaz88; 02-09-2012 at 08:06 PM.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Untested at this time ...

    I have not tested this yet, but I think if should be changed to this.
    Code:
      var cday = 5-now.getDay() + 1;  // number of days until Friday
      if (cday < 0) { cday += 7; }    // aleady passed countdown time, so go for next week
    I'll test it when I get home, but you can try it yourself and let me know how it goes.

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help jmrker. I gave your code a try and it still rolls over to 0 day(s) 23 hours 59 minutes 59 seconds when it hits 4 PM.

    This is where I placed the code:

    Code:
     var cday = 5-now.getDay() + 1;  // number of days until Friday
      if (cday < 0) { cday += 7; }    // aleady passed countdown time, so go for next week
      var ft = ctime.getTime() + (86400000*cday);  // add # days to Friday

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Just a guess again...
    Try:
    Code:
     var cday = 5-now.getDay() + 1;  // number of days until Friday
      if (cday <= 0) { cday += 7; }    // aleady passed countdown time, so go for next week
      var ft = ctime.getTime() + (86400000*cday);  // add # days to Friday
    See the <= change above.

  • #9
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi jmrker,

    I tried implementing your solution above but it still has the same issue where it rolls over to 0 day(s) 23 hours 59 minutes 59 seconds.

    When I change the area in red around it does add 7 days to the time though.

    Code:
     var cday = 5-now.getDay() + 1;  // number of days until Friday
      if (cday >= 0) { cday += 7; }    // aleady passed countdown time, so go for next week
      var ft = ctime.getTime() + (86400000*cday);  // add # days to Friday

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    if (cday<= 0) { cday += 6; } // aleady passed countdown time, so go for next week

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Philip,

    I just tried changing the 7 to a 6 and it still rolls over to 0 Days when it reaches 4.

    This is what I still have:

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=187335&highlight=countdown+timer  post #2
    
    function getSeconds() {
      var now = new Date();
      var time = now.getTime();  // time now in milliseconds
      var ctime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),16,0,0); // 4 pm
    // ctime - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    
     var cday = 5-now.getDay() + 1;  // number of days until Friday
    if (cday<= 0) { cday += 6; }    // aleady passed countdown time, so go for next week
      var ft = ctime.getTime() + (86400000*cday);  // add # days to Friday
    
      var diff = ft - time;  
      diff = parseInt(diff/1000);
      if (diff > 86400) {diff = diff - 86400}
      startTimer (diff);
    }
    
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
      timeInSecs = parseInt(secs);
      ticker = setInterval("tick()",1000); 
      tick(); // to start counter display right away
    }
    
    function tick() {
      var secs = timeInSecs;
      if (secs>0) 
      { 
          timeInSecs--; 
      } else { 
         clearInterval(ticker); // stop counting at zero
         getSeconds();  // and start all over again!
     }
    
      var days = Math.floor(secs/86400);
      secs %= 86400;
    
      var hours= Math.floor(secs/3600);
      secs %= 3600;
      var mins = Math.floor(secs/60);
      secs %= 60;
      var result = days +' day(s) ';
          result += ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                    + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
      document.getElementById("countdown").innerHTML =  result;
    }
    </script>
    </head>
    
    <body onload = "getSeconds()">
    <span id="countdown" style="font-size: 20"; > </span>
    </body>
    </html>

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    OK, finally got chance to do some code testing.
    This moderate change to function appears to work for me...
    Code:
    function getSeconds() {
      var now = new Date();
      var ntime = now.getTime();  // time now in milliseconds
      var ctime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),16,0,0); // 4 pm
    // ctime - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    
      var atime = ctime.getTime();
      var diff = parseInt((atime - ntime)/1000);  
      var cday = 5-now.getDay();      // number of days until Friday
      if (cday <= 0) { cday += 7; }   // aleady passed countdown time, so go for next week
      if (diff <= 0) { diff += (86400*cday); }
    
      startTimer (diff);
    }

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Still not quite right. Today (Saturday) shows 0 days until Friday. Change

    if (diff <= 0) { diff += (86400*cday); }

    to

    diff += 86400*cday;

    with my result at 07:46

    Next update will be in 6 day(s) 08 hours 13 minutes 46 seconds

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #14
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by Philip M View Post
    Still not quite right. Today (Saturday) shows 0 days until Friday. Change

    if (diff <= 0) { diff += (86400*cday); }

    to

    diff += 86400*cday;

    with my result at 07:46

    Next update will be in 6 day(s) 08 hours 13 minutes 46 seconds
    Like time, this solution seems to always be changing.
    It reminded me why I don't like time & date stuff ... it's always changing!

  • #15
    New Coder
    Join Date
    Jan 2012
    Location
    in the uk.
    Posts
    99
    Thanks
    2
    Thanked 6 Times in 4 Posts
    It runs in Opera... Its not pretty by any means and quick and rough. Fuller Version Here

    Code:
    function tween(rfcDateBegin,rfcDateEnd){
    	rfcDateBegin = rfcDateBegin || false;
    	rfcDateEnd = rfcDateEnd || false;
    	if( rfcDateBegin && rfcDateEnd ) return Math.floor( new Date(rfcDateEnd).getTime() - new Date(rfcDateBegin).getTime() );
    return null;
    }
    Date.prototype.getNextDow = function(dow){
    		dow = dow || 0;
    		// finds first dow from day in date object in the month set in the date object and likewise the year.
    		for(dayNo=this.getDate(); (this.getDate()+9)>dayNo; dayNo++){
    			futureDate = new Date(this.getFullYear(), this.getMonth() , dayNo);
    			// we only check forward 9 days, if we don't find anything then we have a problem!
    			if( futureDate.getDay()==dow ) return futureDate.getTime(); // return date value
    			}
    return false; // we return something because we have to!
    }
    
    Number.prototype.convertToReference = function(){
    
    	// reduce to seconds
    	tmp = Math.floor( this / 1000 );
    	r = [];
    	days = Math.floor(tmp / ( 60 * 60 * 24 )); // number of days
    	if( days>0){ r.push(  days , " Days, " ); tmp -= ( days * 60 * 60 * 24); }
    	
    	hours = Math.floor( tmp / ( 60 * 60 ));
    	if( hours>0){ r.push( hours , " Hrs, " ); tmp -= ( hours * 60 * 60 ); }
    	
    	minutes = Math.floor( tmp / 60 );
    	if( minutes>0 ){ r.push( minutes, " Mins, "); tmp -= ( minutes * 60 ); }
    	
    	r.push( tmp , " Secs.");
    	return r.join("");
    	
    }
    function update(){
    // get the time now.
    nowObj = new Date();
    now = new Date().getTime();
    // get the nearest Friday from 'now
    target = nowObj.getNextDow(5); // 5 == friday
    remaining = tween( now , target + offset );
    tg.value = remaining.convertToReference ();
    }
    offset = tween("1 Jan 2012 00:00:00","1 Jan 2012 16:00:00"); // ==57600000 ms, this is midnight to 4pm as milliseconds
    setInterval( update , 1000);
    Assumes you have an imput field and body tag set up like so...

    PHP Code:
    <body onload="tg=document.getElementById('remain');"><input type="text" id="remain" value="" size="50" /> 
    No provision for zero time, that bit you need to work out... Only times between now and target time. Error checking, none!

    Does this help? Can anyone improve on this using the functions already used in the example I posted?
    Last edited by Cremator; 02-12-2012 at 03:14 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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