番茄钟在前 60 秒后未显示答案

【问题标题】：Pomodoro seconds not showing up after first 60 seconds番茄钟在前 60 秒后未显示
【发布时间】：2020-05-26 14:05:15
【问题描述】：

我正在尝试番茄钟。请参考sn-p。播放和停止按钮工作正常，但第二个元素（var secEl = document.querySelector('.timesec');) 在前 60 秒后不显示。

<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>

函数按预期运行，但秒数在前 60 秒后停止显示。我认为 document.querySelector 有问题。

谢谢。

var playEl = document.querySelector('.play');
var secEl = document.querySelector('.timesec');
var minEl = document.querySelector('.timemin');
var stopEl = document.querySelector('.stop')

playEl.addEventListener('click', startTime);
stopEl.addEventListener('click', stopTime);
let counter = 00;
let minCounter = 25;
var secCountDown;


function startTime(){
    
    counter = 60;
    secEl.innerHTML = counter;
   // console.log('i am clicked', counter)
 
    secCountDown = setInterval( countDown, 1000); 

    function countDown(){
        counter--;
        secEl.innerHTML = counter;
        //console.log(secEl.innerHTML);
         
        if( counter == 0){ 
            clearInterval(secCountDown);
            minCountDown();   
           // console.log('i am checked')    
           
        }  
    }
}      
    function minCountDown(){
        minCounter --;
        minEl.innerHTML = minCounter;
        
        if( minCounter == 0 ){
            //console.log('i am checked');
           
        } else
            {
                startTime();
            }
    }

function stopTime(){
    clearInterval(secCountDown);
    minEl.innerHTML = 25;
    secEl.textContent = 00;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>Document</title>
    <style type = text/css>
        .timerBorder{
            border: 1px solid black;
            
            min-height: 280px;
        }
        .time{
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col">
            <h1>Pomodoro</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="row justify-content-center">
                <div class="col-5"> 
                   
                        <div class="mt-4"><button>Working</button><button>Resting</button></div>
                        <div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>
                        <div class="mt-4">
                            <button class="play">Play</button>
                            <button class="stop">Stop</button>
                            <button>Pause</button>                                
                        </div>
                       
                  
                </div>
                <div id="time"></div>
            </div>


        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript

【解决方案1】：

发生这种情况是因为您的 HTML 结构不适合这种情况。 .timemin 元素是 .timesec 元素的父元素，所以一旦你设置了第一个元素的 HTML，第二个元素就会被销毁。一旦发生这种情况，对 .timesec 元素的引用将不再附加到文档中，并且其 HTML 的任何更新都不再具有视觉效果：

<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>

相反，为分钟创建一个单独的span：

<div class="mt-4">
    <span class="timemin">25</span> : <span class="timesec">00</span>
</div>

【讨论】：