定时器的写法-----第三种(实际中运用最多的)

<div>00:00:00</div>
    <button>开始</button>
    <button>停止</button>
    <button>恢复</button>
    <script>
        var oDiv = document.querySelector('div')
        var oBut1 = document.querySelectorAll('button')[0]
        var oBut2 = document.querySelectorAll('button')[1]
        var oBut3 = document.querySelectorAll('button')[2]
        var s = 0;
        var m = 0;
        var h = 0;
        // 为什么要将num设置在外面呢,因为下面的删除定时器操作需要用到这个变量,如果不设置在外面,我们将无法调用
        var num ;
        // 定义一个变量存储初始值
        var res = true;

        oBut1.addEventListener('click', function () {
            if (res) {
                res = false;
            } else {
                return;
            }
            num = setInterval(function () {
                // alert(123)
                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)

        })
        // console.log(s)
        oBut2.addEventListener('click', function () {
            clearInterval(num);
            res = true;
            // 这步是将res重新赋值给true;以利于定时器的继续执行
        })
        oBut3.addEventListener('click', function () {
             s = 0;
             m = 0;
             h = 0;
            oDiv.innerHTML = '00:00:00'
        })
    </script>