这里是一个简单的倒数计时器,从9到0计数。 倒计时工作正常。但是如果我想暂停它,然后从暂停的位置重新启动,该怎么办? 我试过了(见下面的代码)来中断倒计时,保存它所在的号码,然后从新号码重新启动该功能。但是倒数计时很糟糕,我看不出为什么。有任何想法吗?JS倒数计时器 - 暂停功能
PS。我可以从其他地方剪切和粘贴计时器,但是我正在为了学习体验而做这个。我相信有更好的方法来编写JS中的倒数计时器,但是这让我感到困惑,我无法使这种方式工作,并认为我必须失去明显的东西。
非常感谢
var currentTimeInt = 10;
var minn = [];
var stop = 0;
// stop
function stopCounter() {
currentTime = document.getElementById('mins').textContent; // grabs the number of minutes at moment of pause.
stop = 1;
}
// restart
function restart() {
stop = 0;
currentTimeInt = parseInt(currentTime, 10); // converts that number into an integer we can use
document.getElementById("mins").innerHTML=currentTimeInt;
newMinutes(); // restarts the newMinutes function with the start time currentTimeInt set to the time the counter stopped at
}
function newMinutes() {
document.getElementById('mins').innerHTML= currentTimeInt; // displays the counter
for (aa = currentTimeInt-1; aa >= 0; aa--) {
minn.push(aa); // builds an array of numbers in descending order
document.getElementById('mins').innerHTML= minn[aa];
for (let bb=1; bb<=currentTimeInt; bb++) {
if (bb<currentTimeInt) {
setTimeout(function timer(){
\t if (stop == 0) { // checks if "stop!" has been clicked and returns false to stop the function if that is the case
document.getElementById('mins').innerHTML= minn[bb];
\t \t console.log(minn[bb]);
\t }
\t else {return false;}
\t \t }, bb*1000);
\t }
} \t
}
console.log(currentTimeInt + " the end");
}
<span>Minutes: </span><span id= "mins"></span>
<button onclick="newMinutes()">Go!</button>
<button onclick="stopCounter()">Stop!</button>
<button onclick="restart()">Reset!</button>
这是一个很好的机会去学习对象和对象方法的基本知识。使用它们可以使任务更简单,并且您可以使用可重用的代码。 – Teemu
按照降序构建数组后,您的想法如何? –
@Teemu好的,我现在要读一读。谢谢你的提示。 –