Timer w/Start, Stop, Resume functions?

I’ve been searching for any code snippets or libraries that would help with creating a basic timer that would

  1. allow the user to enter a time (e.g., 5:00)
  2. allow the user to stop the timer (e.g., 4:15)
  3. 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 :slight_smile: