定时器的三种写法------1

定时器使用删除定时器和添加定时器实现,但是有缺点是一直在添加和删除定时器,执行效率比较低

<div>00:00:00</div>
    <button>开始</button>
    <button>停止</button>
    <button>恢复</button>
    <script>
        // 获取div对象
        var oDiv = document.querySelector('div')
        //  获取button标签对象
        var oBut1 = document.querySelectorAll('button')[0]
        var oBut2 = document.querySelectorAll('button')[1]
        var oBut3 = document.querySelectorAll('button')[2]
        // 给button1添加定时器
        // 这步给button1绑定事件,添加定时器
        // var time = 0;
        var num;
        var h = 0;
        var m = 0;
        var s = 0;
        oBut1.addEventListener('click', fun1);

        //清除定时器 
        oBut2.addEventListener('click', function () {
            clearInterval(num)
            oBut1.addEventListener('click', fun1);
            // 这步是当清除定时器之后,再给button1重新加上定时器要不然秒表不能继续执行
        })

        // 将秒表恢复到跟原来的样子
        oBut3.addEventListener('click', function () {
            h = 0;
            m = 0;
            s = 0
            oDiv.innerHTML = `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`

        })
        function fun1() {
            num = setInterval(function () {
                s++;
                if (s === 60) {
                    m++
                    s = 0;
                }
                else if (m = 60) {
                    m++
                    m = 0;
                }
                oDiv.innerHTML = `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`
            }, 1000)
            oBut1.removeEventListener('click', fun1);
            // 当点击之后将定时器删除,要不然一直点击开始按钮的时候,定时器的时间会加快
        }
    </script>