SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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>

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!! Really appreciate it


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •