Javascript 24hr time counter

JavaScript
1

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

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.

4

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

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.

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.

6

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.