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

<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)
            // 这步是利用button独有的disabled属性,当点击下按钮之后,按钮设置为禁用状态
            oButton1.disabled = true;
        })
        // 停止按钮
        oButton2.addEventListener('click', function () {

            clearInterval(num);
            oButton1.disabled = false;
            // 这一步是将停止按钮执行后将按钮的disabled设为false 此时按钮变成可以点击状态
        })
        // 恢复按钮
        oButton3.addEventListener('click', function () {
             h = 0;
             m = 0;
             s = 0;
            oDiv.innerHTML = "00:00:00";
        })
    </script>