如何在几轮后停止倒计时？

问题描述：

var secondsP = document.getElementById('seconds'); 
 
var btn1 = document.getElementById("btnSurrender"); 
 
var clock = null; 
 

 
btn1.addEventListener("click", surrender); 
 

 
function timer() { 
 

 
clearInterval(clock); 
 

 
var start = new Date().getTime(); 
 

 
clock = setInterval(function() { 
 

 

 

 

 
     var seconds = Math.round(15 - (new Date().getTime() - start)/1000); 
 

 

 
     if (seconds >= 0) { 
 
      secondsP.textContent = seconds; 
 
     } else { 
 
      clearInterval(clock); 
 
     } 
 

 
     if (seconds === 0) { 
 

 

 
     } 
 
}, 1000); 
 
} 
 

 

 

 
function surrender(){ 
 

 
clearInterval(clock); 
 
secondsP.textContent = 0; 
 
setTimeout(timer,2000); 
 
} 
 

 

 
timer(); 
 
setInterval(timer, 17000);

<html> 
 
<head> 
 
<style> 
 

 
</style> 
 
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script> 
 
</head> 
 
<body> 
 
<p id="seconds">15</p> 
 
<button id= "btnSurrender">end now</button> 
 

 
</body> 
 
</html>

我需要我的小问题有所帮助。我制作了一个倒计时15秒的秒表。在这15秒后，它等待两秒钟，然后重新开始。您可以选择在需要时停止计数，使用“立即结束”按钮（然后在2秒后重新开始）。现在，我的问题是：我怎样才能做出3/4轮后停止计数的功能？

你能不能干脆把函数在一个循环和计数的重复？ – PurpleSmurph

答

使用呼叫setTimeout(timer, 2000)重新启动surrender()中的时钟。所有你需要做的就是在该函数中添加一个if statement，测试一个变量，该变量控制你运行定时器的次数，然后相应地调用/不调用timer()。下面是它的一个工作示例：https://jsfiddle.net/L38q6k5d/，但只给你它是如何工作的一个想法：

在js文件的顶部：

var timesRun = 0 
var timerInterval = null;

里面的surrender功能：

timesRun += 1 // Increment it each time the timer ends 
if (timesRun > 4) { // If the timer has run less than 4 times 
    return; // this will stop the function here, so we dont start the timer again 
}  
setTimeout(timer, 2000); // Reset the timer

里面的timer功能，

if (timesRun > 1) { 
    clearInterval(timerInterval); 
    return; // end the function here 
}

当开始最初的计时器：

timer(); 
timerInterval = setInterval(timer, 17000);

完全JS：

var secondsP = document.getElementById('seconds'); 
var btn1 = document.getElementById("btnSurrender"); 
var clock = null; 
var timerInterval = null; 
// New Code 
var numberOfTimesRun = 0; // this is where we keep track of how many times the timer has run 

btn1.addEventListener("click", surrender); 

function timer() { 
    clearInterval(clock); 

    // New Code 
    if (numberOfTimesRun > 1) { 
    clearInterval(timerInterval); 
    return; // end the function here 
    } 
    // End New Code 

    var start = new Date().getTime(); 

    clock = setInterval(function() { 

    var seconds = Math.round(15 - (new Date().getTime() - start)/1000); 

    if (seconds >= 0) { 
     secondsP.textContent = seconds; 
    } else { 
     clearInterval(clock); 
     numberOfTimesRun += 1; // so we know that 1 iteration of the timer has been completed 
    } 

    if (seconds === 0) { 
    } 

    }, 1000); 
} 



function surrender(){ 
    clearInterval(clock); 
    secondsP.textContent = 0; 
    //New Code 
    numberOfTimesRun += 1; 
    if (numberOfTimesRun > 4) { 
    return; // end the function there 
    } 
    setTimeout(timer, 2000) 
    //End New Code 
} 


timer(); 
timerInterval = setInterval(timer, 17000);

是的，但只有当您使用按钮停止计数时才有效。我想独立于所发生的事情来停止它（按钮或时间结束）。我的问题还不够清楚，对不起。 – unknown2549

改变了我的答案，也为你更新了jsfiddle –

非常感谢:) – unknown2549

如何在几轮后停止倒计时？

相关推荐