Need Help Javascript Countdown Timer Code

Discussion in 'JavaScript' started by gasak, Dec 4, 2013.

  1. #1
    Hello all,

    I have javascript code below for countdown timer. But this code only use 2 variable which is for timer Lunch and break. I want to add another timer which is personal, so the code will have a total of 3 variables for countdown timer which are Lunch, Break and Personal. Please help on this. Thank you very much.

    <SCRIPT type=text/javascript>
    var t1state=0,t2state=0, xstate=true;
    //var totalaux1=3600,totalaux2=2400;
    var totalaux1=3600,totalaux2=2400;
    var t1,t2;
    function timedCount(type) {
    document.getElementById('mode').value=type;
    if (t1state == 0) {
        startCount();
    } else {
        stopCount();
    }
    if    (t1state==0) t1state=1; else t1state=0;
    }
    function startCount() {
        var mode=document.getElementById('mode').value;
        if (mode=="aux1") {
            document.getElementById('a2').disabled=true;
            document.getElementById('a1').value="Stop AUX1";
            document.getElementById('aux1count').value=totalaux1;
            document.getElementById('status').innerHTML="<font face=verdana color=red>AUX Lunch Started.</font>";
            useaux=document.getElementById('aux1count').value;
            m=checkTime(Math.floor(totalaux1/60));
            s=checkTime(useaux-(m*60));
            document.getElementById('aux1').innerHTML="<font color=red>"+m+":"+s+"</font>";
            totalaux1=totalaux1-1;
        } else {
            document.getElementById('a1').disabled=true;
            document.getElementById('a2').value="Stop AUX2";
            document.getElementById('aux2count').value=totalaux2;
            document.getElementById('status').innerHTML="<font face=verdana color=red>AUX Break Started.</font>";
            useaux=document.getElementById('aux2count').value;
            m=checkTime(Math.floor(totalaux2/60));
            s=checkTime(useaux-(m*60));
            document.getElementById('aux2').innerHTML="<font color=red>"+m+":"+s+"</font>";
            totalaux2=totalaux2-1;
        }
        t1=setTimeout("startCount()",1000) ;
    }
    function stopCount() {
        var mode=document.getElementById('mode').value;
        if (mode=="aux1") {
            clearTimeout(t1);
            document.getElementById('a2').disabled=false;
            document.getElementById('a1').disabled=true;
            document.getElementById('a1').value="Start AUX1";
            document.getElementById('status').innerHTML="";
            useaux=document.getElementById('aux1count').value;
            m=checkTime(Math.floor(totalaux1/60));
            s=checkTime(useaux-(m*60));
            document.getElementById('aux1').innerHTML=m+":"+s;
            xstate=false;
        } else {
            clearTimeout(t1);
            if (xstate) document.getElementById('a1').disabled=false;
            document.getElementById('a2').value="Start AUX2";
            document.getElementById('status').innerHTML="";
            useaux=document.getElementById('aux2count').value;
            m=checkTime(Math.floor(totalaux2/60));
            s=checkTime(useaux-(m*60));
            document.getElementById('aux2').innerHTML=m+":"+s;
        }
    }
    function startTime()
    {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    if (document.getElementById('aux1').innerHTML=="00:00") alert("Time's Up! Lunch Break has ended.");
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t2=setTimeout('startTime()',600);
    }
    
    function checkTime(i)
    {
    if (i<10)
      {i="0" + i}
      return i
    }
    </SCRIPT>
    Code (markup):
     
    gasak, Dec 4, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    I think you may have gotten too complex on something simple, but it's hard to say for sure without seeing what it is you're actually doing here -- more specifically how any of these functions are being called/started either by other scripts (the right way) or in the markup (onevent, the sloppy way)... looks like a good time to start using objects... stop using innerHTML (like we're supposed to), and so forth.

    As to a third timer, that should be simple enough -- just make another pair of functions (or better use methods on an object), to handle the start and stop.

    THOUGH, if you only need one second granularity, I'd consider using an array of functions or objects and a single timeout handler. Also it's a little odd you have some code that only looks like it should care about being called once a second, that's being called every 600ms... Most unusual.
     
    deathshadow, Dec 6, 2013 IP