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 Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help making countdown script reset every 24 hours

    I'm trying to make the script below reset every 24 hours. I need it to reset to 23 Hours 59 Minutes 59 Seconds whenever it passes its set time. As is it resets to 1 Day 23 Hours 59 Minutes 59 Seconds. Is this possible?

    Code:
    <script type="text/javascript">
    
    dateFuture1 = new Date(2014,07,12,10,01,00);
    dateNow = new Date();
    dateFuture1.setDate(dateNow.getDate()+1);//sets day of month
    dateFuture1.setFullYear(dateNow.getFullYear());//Sets year (four digits)
    dateFuture1.setMonth(dateNow.getMonth());//sets month (from 0-11)
    
    function GetCount(ddate,iid){
    
    	dateNow = new Date();	//grab current date
    	amount = ddate.getTime() - dateNow.getTime();	//calc milliseconds between dates
    	delete dateNow;
    
    	// if time is already past
    	if(amount < 0){
    		document.getElementById(iid).innerHTML="NOW";
    	}
    	// else date is still good
    	else{
    		days=0;hours=0;mins=0;secs=0;out="";
    
    		amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
    
    		days=Math.floor(amount/86400);//days
    		amount=amount%86400;
    
    		hours=Math.floor(amount/3600);//hours
    		amount=amount%3600;
    
    		mins=Math.floor(amount/60);//minutes
    		amount=amount%60;
    
    		secs=Math.floor(amount);//seconds
    
    		if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
    		if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
    		out += mins +" "+((mins==1)?"min":"mins")+", ";
    		out += secs +" "+((secs==1)?"sec":"secs")+", ";
    		out = out.substr(0,out.length-2);
    		document.getElementById(iid).innerHTML=out;
    
    		setTimeout(function(){GetCount(ddate,iid)}, 1000);
    	}
    }
    
    window.onload=function(){
    	GetCount(dateFuture1, 'countbox');
    };
    </script>
    
    
    
    
    
    <span id="countbox"></span>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Change
    dateFuture1 = new Date(2014,07,12,10,01,00);
    to

    Code:
    var  dateFuture = new Date();
    var dateFuture = dateFuture.setHours(10,0,0); // 10:00:00 today
    var dateFuture1 = new Date(dateFuture);  // make date object
    “...the object of waging a war is always to be in a better position in which to wage another war.” - George Orwell, English novelist and journalist, 1903-1950.

    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.

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for you help but it doesn't work. When the specified time is reached it displays the message "NOW" and does not reset to 23 Hours 59 Minutes 59 Seconds.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by wiseguy View Post
    Thanks for you help but it doesn't work. When the specified time is reached it displays the message "NOW" and does not reset to 23 Hours 59 Minutes 59 Seconds.
    OK. Your script is intended to count down to a specific date/time (once only). Try this simpler script instead. If you want to reset at sometime other than a whole hour (here 10:00) you will need something more complicated. (Ask if you really want that).

    Code:
    <body>
    
    <span id = "countdown" style="color:red";></span>
    
    <script type = "text/javascript">
    
    function showMessage(box) {
    var updateTime = 10;  // update at 10:00
    var now = new Date();
    var hh = now.getHours();
    var mm = now.getMinutes();  // 0-59
    var ss = now.getSeconds();  // 0-59
    var ssleft = 59-ss;
    var mmleft = 59-mm;
    var hhleft = updateTime -hh -1 +24;   
    if (hhleft < 0) {hhleft = hhleft +24}
    if (hhleft > 24) {hhleft = hhleft -24}
    if (hhleft == 24) {hhleft = 0}
    
    var result =  hhleft + " hours " + ( (mmleft < 10) ? "0" : "" ) + mmleft 
                      + " minutes " + ( (ssleft < 10) ? "0" : "" ) + ssleft + " seconds";
    box.innerHTML = "The next update will be in " + result 
    
    }
    
    showMessage(document.getElementById("countdown"));  // to start right away;
    setInterval("showMessage(document.getElementById('countdown'))", 1000);
    
    </script>
    
    
    </body>
    Last edited by Philip M; 08-13-2014 at 03:40 PM. Reason: Improved and corrected

    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.

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I changed

    // if time is already past
    if(amount < 0){
    document.getElementById(iid).innerHTML="NOW";
    }


    to this
    Code:
    // if time is already past
    if(amount < 0){
    document.getElementById(iid).innerHTML="";
    GetCount(dateFuture1, 'countbox');
    }
    Nothing appears at all.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by wiseguy View Post
    When I changed

    // if time is already past
    if(amount < 0){
    document.getElementById(iid).innerHTML="NOW";
    }


    to this
    Code:
    // if time is already past
    if(amount < 0){
    document.getElementById(iid).innerHTML="";
    GetCount(dateFuture1, 'countbox');
    }
    Nothing appears at all.
    No. That is why I deleted it! Try my suggestion in post#4.

    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.

  • #7
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    No. That is why I deleted it! Try my suggestion in post#4.
    What I meant by "nothing appears at all" is that the entire counter disappears when the specified time is reached. I tried the script in post #4 but I don't like having to add the onload event to the body tag or the way it always displays double digits. With the original script I am able to make it reset but not to 24 hours like I need. Is there no way to make it reset without adding 1 day plus the 24 hours?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by wiseguy View Post
    What I meant by "nothing appears at all" is that the entire counter disappears when the specified time is reached. I tried the script in post #4 but I don't like having to add the onload event to the body tag or the way it always displays double digits. With the original script I am able to make it reset but not to 24 hours like I need. Is there no way to make it reset without adding 1 day plus the 24 hours?
    Oh dear! Sorry for the double digits! I wonder if that could be overcome in some way. What is wrong with body onload()? Your own script has window.onload().

    Your original script is not intended for that purpose and does not lend itself to being reset when the time runs out. The countdown is to a single specific date/time. I don't have the time to make the considerable and necessary modifications. Don't look gift horses in the mouth!
    Last edited by Philip M; 08-12-2014 at 03:22 PM.

    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.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,371
    Thanks
    11
    Thanked 591 Times in 572 Posts
    you were close, a few mods like this should do it:
    Code:
    <script type="text/javascript">
    
    function tomorrow(){
      var dateFuture1 = new Date(2014,07,12,10,01,00),
      dateNow = new Date();
      dateFuture1.setDate(dateNow.getDate()+1);//sets day of month
      dateFuture1.setFullYear(dateNow.getFullYear());//Sets year (four digits)
      dateFuture1.setMonth(dateNow.getMonth());//sets month (from 0-11)
      return   dateFuture1;
    }
    
    function GetCount(ddate,iid){
    
    	var amount = ddate-new Date();	//calc milliseconds between dates
    
    	// if time is already past
    	if(amount < 0){
                    ddate= tomorrow();
    		iid.innerHTML="NOW";
    	}
    	// else date is still good
    	else{
    		days=0;hours=0;mins=0;secs=0;out="";
    
    		amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
    
    		days=Math.floor(amount/86400);//days
    		amount=amount%86400;
    
    		hours=Math.floor(amount/3600);//hours
    		amount=amount%3600;
    
    		mins=Math.floor(amount/60);//minutes
    		amount=amount%60;
    
    		secs=Math.floor(amount);//seconds
    
    		if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
    		if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
    		out += mins +" "+((mins==1)?"min":"mins")+", ";
    		out += secs +" "+((secs==1)?"sec":"secs")+", ";
    		out = out.substr(0,out.length-2);
    		iid.innerHTML=out;
    
    		
    	}
    
           setTimeout(function(){GetCount(ddate,iid)}, 1000);
    
    }
    
    window.onload=function(){
    	GetCount(tomorrow(), document.getElementById('countbox') );
    };
    </script>
    
    <span id="countbox"></span>
    basically, more the tomorrow finder to a re-callable function, and move the setTimeout out of the if statement.
    i also moved the id to element conversion to call-time, so you only have to use that relatively expensive DOM method once, not every second...
    Last edited by rnd me; 08-12-2014 at 06:24 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    He wanted to get rid of the days, so suppress the days display:-

    secs=Math.floor(amount); //seconds
    days = 0;


    But this seems more elaborate than necessary. One more time - what (sensibly) is wrong with the simple script I gave you in post#4?
    Last edited by Philip M; 08-13-2014 at 10:17 AM.

    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 Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it worked out. The script below does exactly what I wanted.

    Code:
    <script type="text/javascript">
    
    
    dateFuture1 = new Date(2014,07,13,10,01,00);
    dateNow = new Date();
    
    //sets day of month
    if(dateFuture1.getHours()<dateNow.getHours() || (dateFuture1.getHours()==dateNow.getHours()&&dateFuture1.getMinutes()<=dateNow.getMinutes())) dateFuture1.setDate(dateNow.getDate()+1);
    else dateFuture1.setDate(dateNow.getDate());
    
    dateFuture1.setFullYear(dateNow.getFullYear());//Sets year (four digits)
    dateFuture1.setMonth(dateNow.getMonth());//sets month (from 0-11)
    
    // TESTING: comment out the line below to print out the "dateFuture" for testing purposes
    //document.write(dateFuture +"<br />");
    
    
    //###################################
    //nothing beyond this point
    function GetCount(ddate,iid){
    
    	dateNow = new Date();	//grab current date
    	amount = ddate.getTime() - dateNow.getTime();	//calc milliseconds between dates
    	delete dateNow;
    
    	// if time is already past
    	if(amount < 0){
    		document.getElementById(iid).innerHTML="Now!";
    	}
    	// else date is still good
    	else{
    		days=0;hours=0;mins=0;secs=0;out="";
    
    		amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
    
    		days=Math.floor(amount/86400);//days
    		amount=amount%86400;
    
    		hours=Math.floor(amount/3600);//hours
    		amount=amount%3600;
    
    		mins=Math.floor(amount/60);//minutes
    		amount=amount%60;
    
    		secs=Math.floor(amount);//seconds
    
    		if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
    		if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
    		out += mins +" "+((mins==1)?"min":"mins")+", ";
    		out += secs +" "+((secs==1)?"sec":"secs")+", ";
    		out = out.substr(0,out.length-2);
    		document.getElementById(iid).innerHTML=out;
    
    		setTimeout(function(){GetCount(ddate,iid)}, 1000);
    	}
    }
    
    window.onload=function(){
    	GetCount(dateFuture1, 'countbox');
    	//you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
    };
    </script>

  • #12
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    He wanted to get rid of the days, so suppress the days display:-

    secs=Math.floor(amount); //seconds
    days = 0;


    But this seems more elaborate than necessary. One more time - what (sensibly) is wrong with the simple script I gave you in post#4?
    That script was a little too simple. It always displays double digits and the wording doesn't change from "hours" to "hour" when it reaches one hour left and the same with minutes.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I find that rather depressing. Surely anyone with an ounce of understanding of Javascript could fix these "problems" in a couple of minutes? You could simply copy the relevant lines from rndme's code.

    As I say, it is never a good idea to look gift horses in the mouth.

    Code:
    if(hhleft != 0) {result += hhleft +" "+((hhleft==1)?"hour":"hours")+" ";}
    result += mmleft +" "+((mmleft==1)?"min":"mins")+" ";
    result += ssleft +" "+((ssleft==1)?"sec":"secs");
    Last edited by Philip M; 08-17-2014 at 11:32 AM.

    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
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    I find that rather depressing. Surely anyone with an ounce of understanding of Javascript could fix these "problems" in a couple of minutes? You could simply copy the relevant lines from rndme's code.

    As I say, it is never a good idea to look gift horses in the mouth.
    Just because I didn't like the script you offered means that I'm "looking a gift horse in the mouth"? I thank you for your attempt to help but I am not obligated to take your advice.

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,371
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Quote Originally Posted by wiseguy View Post
    Just because I didn't like the script you offered means that I'm "looking a gift horse in the mouth"? I thank you for your attempt to help but I am not obligated to take your advice.
    what about me? you never thanked me or clarified what you didn't like about the effort i put into solving your problem...
    (i don't really care, but i noticed you took a while to get back to us, so it's hard to blame us for any un-resolved issues)
    Last edited by rnd me; 08-17-2014 at 04:09 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


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