Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/load_globes.php on line 22

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/thescrip/public_html/jclass/load_globes.php:22) in /home/thescrip/public_html/jincludes/globals.php on line 43

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/thescrip/public_html/jclass/load_globes.php:22) in /home/thescrip/public_html/jincludes/globals.php on line 43

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/load_globes.php on line 22

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61
Javascript Countdown Timer
TheScriptCenter.com


print page

Countdown Timer Script

Javascript Countdown Timer

This script was initially written as a cooking type of timer for recipes. You can set the hours, minutes and seconds. When you hit the start button it starts the timer until it reaches zero, then you'll get an alert telling you the time is up. Feel free to use this in any way you see fit. There may or may not be some bugs in this script but so far it seems to run pretty smooth for me.


00:00:00
Hrs Min Sec
: :
[+] [-] [+] [-] + -]

 
Code:

<script language=javascript>

<!--//
//Javascript Countdown Timer.
//set the amount of time click
//start timer and the clock will
//count down until it reaches zero
//Jason Russo http://thescriptcenter.com
var message = "Complete.";
//do not edit below this line.//
var parselimit=0;
var st=0;
var limit,curhour,curmin,cursec;
function set_limit(strtstop) {
//prevent multiple settimeouts
if(st) { clearTimeout(st); }
 
if(document.getElementById("pause").value == 1) {
limit=document.getElementById("show_timer").innerHTML;
} else {
limit=document.getElementById("hours").value + ":" + document.getElementById("min").value + ":" + document.getElementById("sec").value;
}
parselimit=limit.split(":");
// take the minutes x 60 add it to the seconds;
parselimit=parselimit[0]*3600+parselimit[1]*60+parselimit[2]*1;
//exit if timer wasn't set. //
if(parselimit <= 0) { return; }
 
if(strtstop == 1) {
clearTimeout(st);
} else {
st = setTimeout("begintimer()",1000);
 }
}
 
function begintimer(){
if (parselimit==1) {
//ding ding ding
document.getElementById("show_timer").innerHTML = message;
alert(message);return;
} else{ 
parselimit-=1;
curhour=Math.floor(parselimit/3600);
//alert(parselimit)
/* greater than an hour divide by
60 but subtract the hours. */
if(parselimit > 3600) {
//first convert hours back into seconds
curmin = curhour * 3600;
//subtract that from total to get minutes left.
curmin = parselimit - curmin;
curmin = Math.floor(curmin/60);
//alert(curmin);
} else {
curmin = Math.floor(parselimit/60);
}
cursec=parselimit%60;
 
}
curmin += "";
 if(curmin.length == 1 || curmin==9) {
 curmin = "0" + curmin;
 }
cursec += "";
//alert(cursec);
 if(cursec.length == 1 || cursec==9) {
 cursec = "0" + cursec;
  }
curtime = curhour + ":" + curmin + ":" + cursec;
 
//alert(document.getElementById("show_timer").innerHTML);
document.getElementById("show_timer").innerHTML = curtime;
st=setTimeout("begintimer()",1000);
}
 
function add_time_clock(x,frmelm) {
var ter = document.getElementById(frmelm).value;
  /* add time */
 if(x==1) {
 ter = eval(ter) + 1;
   //if greater than 60 go to zero. i'm maxing out the hours at 60 too.
  if(ter >= 60) {
  ter='00';
   }
  } else {
  /* subtract time */
 ter = eval(ter)-1;
   //if greater than 60 go to zero. i'm maxing out the hours at 60 too.
  if(ter <= 0) {
  ter = '00';
   }
 }
ter = "" + ter;
if(ter.length == 1) { 
ter = "0" + ter;
}
 document.getElementById(frmelm).value = ter;
}
function rset_tmr() {
document.getElementById('show_timer').innerHTML = "00:00:00";
document.getElementById('pause').value=0;
 }
function show_hide(div) {
if(document.getElementById(div).style.display=='none') {
 document.getElementById(div).style.display='';
 } else {
 document.getElementById(div).style.display='none';
   }
 }
//-->
</script>
 
<div id="set_timer" style="">
<input id="pause" type="hidden" value="0" /><br />
<table border="1" bordercolor="#000000" cellspacing="0">
<tbody>
<tr>
<td align="center" colspan="3" height="25">
<b><span id="show_timer">00:00:00</span></b></td>
</tr>
<tr>
<td>
Hrs</td>
<td>
Min</td>
<td>
Sec</td>
</tr>
<tr>
<td>
<input id="hours" maxlength="2" size="1" type="text" value="00" />:</td>
<td>
<input id="min" maxlength="2" size="1" type="text" value="00" />:</td>
<td>
<input id="sec" maxlength="2" size="2" type="text" value="00" /></td>
</tr>
<tr>
<td>
[<a href="javascript:add_time_clock('1','hours')" data-cke-saved-href="javascript:add_time_clock('1','hours')">+</a>] [<a href="javascript:add_time_clock('2','hours')">-</a>]</td>
<td>
[<a href="javascript:add_time_clock('1','min')">+</a>] [<a href="javascript:add_time_clock('2','min')">-</a>]</td>
<td>
<a href="javascript:add_time_clock('1','sec')">+</a> <a href="javascript:add_time_clock('2','sec')">-</a>]</td>
</tr>
<tr>
<td align="center" colspan="3">
<input onclick="set_limit()" type="button" value="Start" /> <input onclick="set_limit('1'),document.getElementById('pause').value=1" type="button" value="Pause" /> <input onclick="rset_tmr()" type="button" value="Reset" /></td>
</tr>
</tbody>
</table>
<br />
 </div>