SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript 24hr time counter

    i need to run time counter from 23:59:59 to 00:00:00. Time should continue on decreasing even after the page is reloaded or refresh.
    How can i do that?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    <input id="countdown" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function CountDown(id){
     var now=new Date(),srt=new Date(now.getFullYear(),now.getMonth(),now.getDate(),0);
     document.getElementById(id).value=Math.floor(24*60*60-(now-srt)/1000);
     CountDown[id]=setTimeout(function(){  CountDown(id); },1000);
    }
    
    CountDown('countdown')
    
    /*]]>*/
    </script>
    </body>
    
    </html>

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That code will not continue from where it was if the page is refreshed and also will run slow if the re is heavy CPU load.

    To get a countdown to continue from where it would have been up to after reloading the page you'd need to save a cookie with a 24 hour expiry when you first start the script and save the current date/time if such a cookie doesn't already exist (if one does then you'd read that in to determine where to continue counting from).

    Instead of nesting setTimeOut inside the function you'd use setInterval outside the function to do the updates - even without any other code and without refreshing the page the setTimeout code would be running slow by the end of the 24 hours because of the time taken to run the code in the script itself.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the posted script displays the number of seconds until midnight no matter how many times it is loaded or refreshed

    nstead of nesting setTimeOut inside the function you'd use setInterval outside the function to do the updates - even without any other code and without refreshing the page the setTimeout code would be running slow by the end of the 24 hours because of the time taken to run the code in the script itself.
    the interval is one second the time to run the script id < .01 seconds so there is no problem

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by vwphillips View Post
    the posted script displays the number of seconds until midnight no matter how many times it is loaded or refreshed
    The OP didn't ask for a timer that counts down to midnight - they asked for one that counts down from 23:59:59 to 00:00:00. So if someone accessed the page at 7:00:01 then it would be counting down to 7am.

    Quote Originally Posted by vwphillips View Post
    the interval is one second the time to run the script id < .01 seconds so there is no problem
    You have no way to tell what else is running on the computer - if another application outside their browser steals 100% of the CPU for 20 seconds then using setTiimeout would then always be 20 seconds slow whereas setInterval would quickly catch up again.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You have no way to tell what else is running on the computer - if another application outside their browser steals 100% of the CPU for 20 seconds then using setTiimeout would then always be 20 seconds slow whereas setInterval would quickly catch up again.
    I once worked on a javascript timer and all I can say is that neither setTimeout nor setInterval are realiable, they will both cause the timer to lag behind if the CPU or the browser is busy doing other stuff. setInterval may be a bit more accurate but eventually suffers from similar delays as setTimeout and may not catch up at all. The only reliable way I found was recording the system time once when the timer starts and then update the timer every second (or a few times per second) and calculate the remaing time by using the difference of the current system time and the initial system time.

    So in this case the initial script would have to store the system time in a cookie (new Date().getTime()) and then the updating script would subtract the current time from the cookie time to know how much time has elapsed.


Tags for this Thread

Bookmarks

Posting Permissions

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