JavaScript實現計時器

時間 2019-12-15

標籤 javascript 實現計時器欄目 JavaScript 简体版

原文原文鏈接

用JavaScript實現了一個簡單的計時器，經過按鈕控制，實現了計時器的「開始計時」、「暫停計時」、「復位」功能。html

樣式較爲簡陋，後期會繼續修改，並完善功能。node

由於代碼較少，就放在一個文件中了。瀏覽器

在火狐瀏覽器中的效果如圖：app

運行HTML文件後，未點擊按鈕：spa

點擊開始按鈕後：code

作的過程當中遇到的問題：htm

原計劃是經過修改類名，把「開始計時」和「暫停計時」兩個按鈕合併爲一個的，可是由於分兩個按鈕作的效果更好且更容易實現，因此仍是用來兩個button類型的<input>標籤。blog

jishi.html事件

<!--Created by real_pbyyy on 2017/3/18.-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TimeCount</title>
    <style>
        #pause{
            display: none;
        }
        .count{
            width:300px;
            height:150px;
            background: whitesmoke;
            border:solid darkgray 1px;
            border-radius: 1px;
            padding:20px;
            margin:0 auto;
            margin-top:60px;
        }
        p{
            margin:30px;
        }
    </style>
</head>
<body>
<div class="count">
    <p id="tCount"></p>
    <p id="tCount2"></p>
    <input type="button" value="開始計時" id="start"/>
    <input type="button" value="暫停計時" id="pause" />
    <input type="button" value="復位" id="reset"/>
</div>
<script>
    //tCount2是準備實現倒計時功能的，如今還沒作
    var tCount = document.getElementById("tCount"),
        tCount2 = document.getElementById("tCount2"),
        sBtn =document.getElementById("start"),
        rBtn = document.getElementById("reset"),
        pBtn = document.getElementById("pause"),
        txt = document.createTextNode("00:00:00"),
        t=1,
        s;
    tCount.appendChild(txt);

    //按鈕事件
    function control() {
        sBtn.onclick=function () {
            sBtn.style.display = "none";
            pBtn.style.display = "inline";
            count();
        };

        rBtn.onclick=function(){
            reset();
            sBtn.style.display="inline";
            pBtn.style.display="none";
        }

        pBtn.onclick=function () {
            sBtn.style.display="inline";
            pBtn.style.display="none";
            pause();
        }

    }

    //計算時間
    function timeAdd() {
        if(t<10){
            txt.nodeValue = "00:00:0"+t;
        }else if(t>=10&&t<60){
            txt.nodeValue = "00:00:"+t;
        }else if(t<3600&&t>60){
            var m = Math.floor(t/60);
            var t1 = t%60;
            if(m<10){
                if(t1<10){
                    txt.nodeValue = "00:0"+m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    txt.nodeValue = "00:0"+m+":"+t1;
                }
            }else if(m<60&&m>=10){
                if(t1<10){
                    txt.nodeValue = "00:"+m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    txt.nodeValue = "00:"+m+":"+t1;
                }
            }
        }else if(t>=3600){
            var h = Math.floor(t/3600);
            var m = Math.floor((t-3600*h)/60);
            var t1 = t%60;
            var mt;
            if(m<10){
                if(t1<10){
                    mt = "0"+m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    mt = "0"+m+":"+t1;
                }
            }else if(m<60&&m>=10){
                if(t1<10){
                    mt = m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    mt = m+":"+t1;
                }
            }
            txt.nodeValue = h+":"+ mt;
        }
        t++;
    }

    //刷新時間顯示
    function count(){
        s = setInterval("timeAdd()",1000);
    }

    //復位鍵的功能實現
    function reset() {
        clearInterval(s);
        txt.nodeValue = "00:00:00";
        t = 1;
        s = null;
    }

    //暫停鍵的功能實現
    function pause() {
        var now = txt.nodeValue;
        clearInterval(s);
    }

    window.onload=function () {
        control();
    }
</script>
</body>
</html>