原生js计时器

系统管理员 2022-01-06 10:13 334阅读 0赞

闲来无事,写一个简单的计时器

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Elias:计时器</title>
        <style>
            div.box{
                width: 300px;
                height: 100px;
                margin: 100px auto;
                line-height: 50px;
                text-align: center;
                border: 1px solid red;
            }
            div.time{
                width: 300px;
                height: 50px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="time">
                00:00:00
            </div>
            <form>
                <button type="button" id="reset">重新开始</button>
                <button type="button" id="stop">暂停</button>
                <button type="button" id="continue">继续</button>
            </form>
        </div>
        <script>
            var oTime = document.querySelector('.time');
            var oReset = document.getElementById('reset');
            var oStop = document.querySelector('#stop');
            var oContinue = document.querySelector('#continue');
    
            function format(obj) {
        //简单封装一个格式化时间的函数
                if (obj < 10) {
                    return "0" + obj;
                } else {
                    return obj;
                }
            }
            var ss,s,ms,hs,timer;
            oReset.onclick = function () {
                ss = s = ms = hs = 0;
                timeRun();
                oStop.onclick = function () {
                    clearInterval(timer);
                }
                oContinue.onclick = function () {
                    timeRun();
                }
            }
    
            function timeRun() {
                clearInterval(timer);
                timer = setInterval(function () {
                    ss++;
                    ms = format(Math.floor(ss / 60));
                    hs = format(Math.floor(ss / 3600));
                    s = format(ss % 60);
                    oTime.innerHTML = hs + ":" + ms + ":" + s;
                }, 1000)
            }
        </script>
    </body>
    
    </html>

转载于:https://www.cnblogs.com/gitByLegend/p/10541360.html