Question

这个想法是用分钟和秒来进行简单的js倒计时，在html文档中显示数字，并带有一个按钮来开始/继续，另一个按钮来停止/暂停。我在暂停时间上停留了几秒钟...“开始”按钮有效，但我似乎无法弄清楚为什么“停止”无效。我读过多个类似的问题尝试修复，但结果仍然相同。有什么想法吗？

非常感谢！

var min = 5;
var sec = 60;
var secoutput;
 
document.getElementById("min").innerHTML = min;
if (sec >= 60)
	{document.getElementById("sec").innerHTML = "00";}
else
	{document.getElementById("sec").innerHTML = secoutput; }
   
function start(){
var secoutput = setInterval(function(){
	sec-=1;
    document.getElementById("sec").textContent = sec;
    if(sec <= 0)
        clearInterval (secoutput);
    },1000);
}

function stop(){
        clearInterval (secoutput);
}

<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
    
<p id="min"></p>
<p id="sec"></p>

Answer 1

问题是您在var secoutput = setInterval(function(){函数内部声明了start()。因此，您无法在start()函数之外访问该特定变量。如果您只是删除var声明而只有secoutput = setInterval(function(){，则您的代码将起作用。您可以了解有关JavaScript here中的闭包的更多信息。

Answer 2

var min = 5;
var sec = 60;
var secoutput;
 
document.getElementById("min").innerHTML = min;
if (sec >= 60)
	{document.getElementById("sec").innerHTML = "00";}
else
	{document.getElementById("sec").innerHTML = secoutput; }
   
function start(){
    // Removed the var so the original variable is used
    secoutput = setInterval(function(){
	sec-=1;
    document.getElementById("sec").textContent = sec;
    if(sec <= 0)
        clearInterval (secoutput);
    },1000);
}

function stop(){
        clearInterval (secoutput);
}

<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
    
<p id="min"></p>
<p id="sec"></p>

Answer 3

问题出在您的start（）函数中，您在其中重新声明了secoutput变量。只需更改此内容即可：

var secoutput = setInterval(function(){ ... }

对此：

secoutput = setInterval(function(){ ... }

clearInterval按钮不会停止setInterval倒计时

3 个答案: