I’ve been searching for any code snippets or libraries that would help with creating a basic timer that would
- allow the user to enter a time (e.g., 5:00)
- allow the user to stop the timer (e.g., 4:15)
- allow the user to resume or re-start the countdown timer at the time she stopped it (e.g., 4:15)
From the best I’ve been able to find so far it looks like a clearInterval or clearTimeout function should be used, but I’m not really sure. Any suggestions? Thanks.
<!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>
<script type="text/javascript">
/*<![CDATA[*/
function zxcStartTime(id,srt){
var obj=document.getElementById(id),ms=obj.value.split(/\\W/);
if (zxcStartTime[id]){
clearTimeout(zxcStartTime[id].to);
}
if (srt&&isFinite(ms[0])&&isFinite(ms[1])){
zxcStartTime[id]={
obj:obj,
srt:new Date(),
time:ms[0]*60+ms[1]*1
}
zxcTick(zxcStartTime[id]);
}
}
function zxcTick(o){
var now=Math.floor(o.time-(new Date()-o.srt)/1000);
if (now>=0){
o.obj.value=zxcNu(Math.floor(now/60))+':'+zxcNu(now%60);
o.to=setTimeout(function(){ zxcTick(o); },1000)
}
}
function zxcNu(nu){
return (nu>9?'':'0')+nu;
}
/*]]>*/
</script></head>
<body>
<input id="time" value="1:00" /><input type="button" name="" value="Start" onmouseup="zxcStartTime('time',true);" /><input type="button" name="" value="Stop" onmouseup="zxcStartTime('time',false);" />
<br />
<input id="time2" value="1:00" /><input type="button" name="" value="Start" onmouseup="zxcStartTime('time2',true);" /><input type="button" name="" value="Stop" onmouseup="zxcStartTime('time2',false);" />
</body>
</html>
Thanks a lot!! Really appreciate it