|
Countdown to any time, any day in the future. Pause period at zero hour. When zero hour is attained counts up from zero hour. Optional before, current, and after messages. |
|
In order to show the above example I have set the script to countdown from a period of 10 seconds from the current time.
You can reset the countdown to the current time plus 10 seconds by pressing the reset button. There is also a 5 second pause at Zero Hour
<script type="text/javascript">
<!-- var myDate=new Date(2003,08,25,17,14,00) // year, month, date, hour, minites, seconds var before="Until Disneyland" //"Until Zero Hour!" // message before || use empty quotes for no message "" var current="This Is Zero Hour!" // message on || use empty quotes for no message "" var after="Since Disneyland" // message after || use empty quotes for no message "" pause=10000 // set to 0 for no pause timer="" function countdown(){ currentDate=new Date() dateResult=myDate-currentDate dayResult=Math.floor(dateResult/(60*60*1000*24)*1) hourResult=Math.floor((dateResult%(60*60*1000*24))/(60*60*1000)*1) minResult=Math.floor(((dateResult%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) secResult=Math.floor((((dateResult%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) if(before!=""){ document.getElementById("display2").innerHTML=before } if(dayResult==0&&hourResult==0&&minResult==0&&secResult== 0){ document.getElementById("display").innerHTML=dayResult +"<span style='font-size:12;vertical-align:top'> Days </span>"+hourResult +"<span style='font-size:12;vertical-align:top'> Hours</span> "+minResult +"<span style='font-size:12;vertical-align:top'> Minutes</span> "+secResult +"<span style='font-size:12;vertical-align:top'> Seconds</span>" if(current!=""){ document.getElementById("display2").innerHTML=current } pause_me() return } if(myDate<currentDate){ dayResult= -dayResult-1 hourResult= -hourResult-1 minResult= -minResult-1 secResult= -secResult if(after!=""){ document.getElementById("display2").innerHTML=after } } timer=setTimeout("countdown()",1000) document.getElementById("display").innerHTML=dayResult +"<span style='font-size:12;vertical-align:top'> Days </span>"+hourResult +"<span style='font-size:12;vertical-align:top'> Hours</span> "+minResult +"<span style='font-size:12;vertical-align:top'> Minutes</span> "+secResult +"<span style='font-size:12;vertical-align:top'> Seconds</span>" } function pause_me(){ clearTimeout(timer) setTimeout("countdown()",pause) // or your own function } // Add onload="countdown()" to the opening BODY tag // --> </script>
<div id="display" style="width:320px; font-size:20px; font-family:arial; color:#8e8462; background-color:#c9bda9; border:3px ridge #908460; text-align:center"></div>
<div id="display2" style="width:320px; font-size:20px; font-family:arial; color:#8e8462; background-color:#c9bda9; border:3px ridge #908460; text-align:center"></div>