停止的定时器无法恢复

Question

#想实现跳动显示当天时间，且点击按钮可停止时间5秒，期间不能点击按钮，5秒后时间跳动恢复。写了代码后发现时间恢复这一步没有实现，好像停止定时器的原理是是停止setInterval(调用函数,延迟的毫秒数)代码一样的定时器，之后再写一样的不起作用。请问要怎么改才能实现预想的功能呢？

<span id="dianjiww"></span>
<span id="dianjiwww"></span>
<button id="dianjiwwww">停止时钟5秒</button>
<script>
    var dianjiw = document.getElementById('dianjiw')
    var dianjiww = document.getElementById('dianjiww')
    var dianjiwww = document.getElementById('dianjiwww')
    var dianjiwwww = document.getElementById('dianjiwwww')
    var dianjiwwwwtime = 4

    function dianjiwtimer() {
        var dianjiwtime = ((+new Date()) / 1000) % (60 * 60 * 24)
        dianjiw.innerHTML = (parseInt(dianjiwtime / 60 / 60) + 8) % 24
        dianjiw.innerHTML = dianjiw.innerHTML < 10 ? '0' + dianjiw.innerHTML + ':' : dianjiw.innerHTML + ':'
        dianjiww.innerHTML = parseInt(dianjiwtime / 60 % 60)
        dianjiww.innerHTML = dianjiww.innerHTML < 10 ? '0' + dianjiww.innerHTML + ':' : dianjiww.innerHTML + ':'
        dianjiwww.innerHTML = parseInt(dianjiwtime % 60)
        dianjiwww.innerHTML = dianjiwww.innerHTML < 10 ? '0' + dianjiwww.innerHTML : dianjiwww.innerHTML
    }
    dianjiwtimer() //事先调用一次，防止定时调用前的空白
    var dianjiwtimer = setInterval(dianjiwtimer, 1000)
    dianjiwwww.addEventListener('click', function() {
        var dianjiwtimer2 = setInterval(function() {
            if (dianjiwwwwtime == 0) {
                dianjiwwww.disabled = false
                dianjiwwww.innerHTML = '停止时钟5秒'
                dianjiwwwwtime = 4
                clearInterval(dianjiwtimer2)
                dianjiwtimer = setInterval(dianjiwtimer, 1000)
            } else {
                dianjiwwww.disabled = true
                dianjiwwww.innerHTML = dianjiwwwwtime + 's'
                dianjiwwwwtime--
                clearInterval(dianjiwtimer)
            }
        }, 1000)
    })
</script>

Answer 1

var dianjiwtimer = setInterval(dianjiwtimer, 1000)
你dianjiwtimer变量名与dianjiwtimer()函数名同名了
你题目的解答代码如下：

    var dianjiw = document.getElementById('dianjiw')
    var dianjiww = document.getElementById('dianjiww')
    var dianjiwww = document.getElementById('dianjiwww')
    var dianjiwwww = document.getElementById('dianjiwwww')
    var dianjiwwwwtime = 4
 
    function dianjiwtimer() {
        var dianjiwtime = ((+new Date()) / 1000) % (60 * 60 * 24)
        dianjiw.innerHTML = (parseInt(dianjiwtime / 60 / 60) + 8) % 24
        dianjiw.innerHTML = dianjiw.innerHTML < 10 ? '0' + dianjiw.innerHTML + ':' : dianjiw.innerHTML + ':'
        dianjiww.innerHTML = parseInt(dianjiwtime / 60 % 60)
        dianjiww.innerHTML = dianjiww.innerHTML < 10 ? '0' + dianjiww.innerHTML + ':' : dianjiww.innerHTML + ':'
        dianjiwww.innerHTML = parseInt(dianjiwtime % 60)
        dianjiwww.innerHTML = dianjiwww.innerHTML < 10 ? '0' + dianjiwww.innerHTML : dianjiwww.innerHTML
    }
    dianjiwtimer() //事先调用一次，防止定时调用前的空白
    var dianjiwtimer1 = setInterval(dianjiwtimer, 1000)// dianjiwtimer变量名改为dianjiwtimer1
    dianjiwwww.addEventListener('click', function() {
        var dianjiwtimer2 = setInterval(function() {
            if (dianjiwwwwtime == 0) {
                dianjiwwww.disabled = false
                dianjiwwww.innerHTML = '停止时钟5秒'
                dianjiwwwwtime = 4
                clearInterval(dianjiwtimer2)
                dianjiwtimer1 = setInterval(dianjiwtimer, 1000)// dianjiwtimer变量名改为dianjiwtimer1
            } else {
                dianjiwwww.disabled = true
                dianjiwwww.innerHTML = dianjiwwwwtime + 's'
                dianjiwwwwtime--
                clearInterval(dianjiwtimer1) // dianjiwtimer变量名改为dianjiwtimer1
            }
        }, 1000)
    })

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!