定时器----方法二用button按钮实现

原创

已于 2022-01-20 11:33:50 修改 · 698 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-01-13 16:15:53 首次发布

<div>00:00:00</div>
    <button>开始</button>
    <button>停止</button>
    <button>恢复</button>
    <script>
        var oDiv = document.querySelector('div')
        var oButton1 = document.querySelectorAll('button')[0]
        var oButton2 = document.querySelectorAll('button')[1]
        var oButton3 = document.querySelectorAll('button')[2]
        var num = 0;
        var h = 0;
        var m = 0;
        var s = 0;
        // 给时间一绑定事件
        oButton1.addEventListener('click', function () {
            //  设定定时器
            num = setInterval(function () {
                s++;
                if (s === 60) {
                    m++;
                    s = 0;
                }
                if (m === 60) {
                    h++;
                    m = 0;
                }
                oDiv.innerHTML = `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`
            }, 1000)