js秒表计时

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个使用HTML、CSS和JavaScript实现的简易计时器。计时器包含开始、暂停和结束按钮，能够实时更新小时、分钟和秒数。通过设置定时器和清除定时器的方法，实现了计时器的基本功能。

<button id='btn1'>开始</button>
    <button id='btn2'>暂停</button>
    <button id='btn3'>结束</button>
    <span id='hour'>0</span> ：
    <span id='min'>0</span> ：
    <span id='sec'>0</span>
    <script>
        var t;
        var flag = 1;
        btn1.onclick = function () {
            if (flag) {
                t = setInterval(function () {
                    sec.innerHTML++;
                    if (sec.innerHTML == 60) {
                        min.innerHTML++;
                        sec.innerHTML = 0;
                        if (min.innerHTML == 60) {
                            hour.innerHTML++;
                            sec.innerHTML = 0;
                        }
                    }
                }, 1000);
                flag = 0;
            }
        }
        btn2.onclick = function () {
            clearInterval(t);
            flag = 1;
        }
        btn3.onclick = function () {
            clearInterval(t);
            flag = 1;
            hour.innerHTML = 0;
            min.innerHTML = 0;
            sec.innerHTML = 0;
        }
    </script>