JavaScript写秒表

1、HTML部分

<div id="div1">
        <span id="hour">00</span>
        <span>:</span>
        <span id="min">00</span>
        <span>:</span>
        <span id="sec">00</span>
        <br />
        <button id="start">开始</button>
        <button id="reset">复位</button>
</div>

2、css部分

#div1 {
            width: 100px;
            height: 200px;
            padding: 50px;
            background-color: orange;
            border: 1px solid #000000;
            margin: auto;
}
span{
            font-size: 20px;
 }
#div1 button{
            width: 100px;
            height: 30px;
            font-size: 16px;
            margin-top: 20px;
            background-color: black;
            color: white;
}

3、JavaScript部分

function $(id) { 
            return document.getElementById(id);
        }
        var i = 0;
        var timer = null;
        var judge = true;
        window.onload = function(){
            //获取按钮
            function startTime(){
                timer = setInterval(function(){
                    i++;
                    $("sec").innerHTML = doubleNum(i % 60);
                    $("min").innerHTML = doubleNum(parseInt(i / 60) % 60);
                    $("hour").innerHTML = doubleNum(parseInt(i / 3600));
                },1000);
            }

            function stopTime(){
                clearInterval(timer);
            }

            $("start").onclick = function(){
                if(judge){
                    $("start").innerHTML = "继续";
                    judge = false;
                    startTime();
                }else{
                    $("start").innerHTML = "开始";
                    judge = true;
                    stopTime();
                }
            }

            $("reset").onclick = function(){
                clearInterval(timer);
                i = 0;
                judge = true;
                $("start").innerHTML = "开始";
                $("sec").innerHTML = "00";
                $("min").innerHTML = "00";
                $("hour").innerHTML = "00";
            }
        }
        function doubleNum(n){
            if(n < 10){
                return "0" + n;
            }else{
                return n;
            }
        }

标签：function,00,JavaScript,innerHTML,doubleNum,start,judge,秒表
来源： https://www.cnblogs.com/zorzhang/p/13801293.html