如何使用js解决秒表错误?

时间:2014-02-09 11:08:34

标签: javascript html timer

我正在尝试制作一个java脚本计时器。但我面临一些简单的问题。第一个是我开始时间,它从第二节开始,但我想开始它像01.分钟问题另外还有另外一个问题,就是在获得59号后,小时数没有增加。

这是我的js代码行

var digit=00;
var hrs = 00;
var min=00;
var time;
var timer_is_on=0;

function timer(){
    document.getElementById("secs").innerHTML=digit;
    digit=digit+1;
    digit = parseInt(digit);
    time=setTimeout("timer()",1000);
    if(digit>"59"){

        min=parseInt(min)+1;
        var count = min.toString().length;
        document.getElementById("mins").innerHTML=min;
        digit=0;
    }
    if(digit>"59"){
        hrs=parseInt(hrs)+1
        document.getElementById("hrs").innerHTML=hrs;
        digit=0;
    }
}

    function activate(){
    if(!timer_is_on){
        timer_is_on=1;
        timer();
    }
}

这是我的HTML代码:

<a href="#" onclick="activate()">Click here to start the timer</a>
<span id="hrs" >00</span>:<span id="mins" >00</span>:<span id="secs">00</span>

我的工作演示在这里:http://jsfiddle.net/rFTzL/1/ 此外,我需要通过点击相同的开始按钮设置停止时间。任何想法?

2 个答案:

答案 0 :(得分:0)

以下是解决方案http://jsfiddle.net/rFTzL/3/

var digit=00;

var hrs = 00;
var min=00;
var time;
var timer_is_on=0;

function timer(){
    document.getElementById("secs").innerHTML=("0" +digit).slice(-2);
    digit=digit+1;
    digit = parseInt(digit);

    if(digit>59){

        min=parseInt(min)+1;
        var count = min.toString().length;
        document.getElementById("mins").innerHTML=("0"+min).slice(-2);
        digit=0;
    }
    if(min>59){
        hrs=parseInt(hrs)+1
        document.getElementById("hrs").innerHTML=("0"+hrs).slice(-2);
        digit=0;
    }
}


    function activate(){
    if(!timer_is_on){
        timer_is_on=1;
        time=setInterval("timer()",1000);
    }else{
        clearInterval(time);
                timer_is_on=0;
    }
}

它也将停止观看。 有一个问题,您必须使用min而不是数字来更新小时数。

答案 1 :(得分:0)

您的代码中存在一些问题。试试这个 。还添加了评论

            var digit=0;
    var hrs = 0;
    var min=0;
    var time;
    var timer_is_on=0;

    function timer(){
        //[Old] - this should be placed after you increment digit
        // document.getElementById("secs").innerHTML = digit

        //[New]
        // get the numerical value for seconds,minutes,hours
        digit = parseInt(document.getElementById("secs").innerHTML);
        min   = parseInt(document.getElementById("mins").innerHTML);
        hrs   = parseInt(document.getElementById("hrs").innerHTML);
        // increment;
        digit=digit+1;    


        if(digit>"59"){

            min = parseInt(min)+1;
            // why is this code here
            var count = min.toString().length;


            digit=0;
        }
        // [old] checking if second is greater than 59 and incrementing hours
        // if(digit>"59"){

        // [new] check if minute is greater than 59
        if(min > "59"){
            hrs=parseInt(hrs)+1;        
            digit=0;
            min=0; // minute should be reset as well
        }


         // set the values after all processing is done
        document.getElementById("secs").innerHTML = format(digit);
        document.getElementById("mins").innerHTML= format(min);
        document.getElementById("hrs").innerHTML=format(hrs);

    }

        function activate(){
        if(!timer_is_on){
            timer_is_on=1;
            // time = setTimeout("timer()",1000) will only call it once , use setInterval instead
            time=setInterval("timer()",1000);
        }
        else {
            timer_is_on=0;
            clearInterval(time); // clear the timer when the user presses the button again and reset timer_is_on
        }
    }

    // left pad zero if it is less than 9
    function format(time){
        if(time > 9)
            return time;
        else return "0"+time;
    }