的Javascript倒計時隨着暫停和恢復

Question

我有JavaScript的倒計時

var timersCount = 0; 
var timerCounter = setInterval(countTimers, 30000); 
countTimers(); 

function countTimers() 
{ 
    timersCount++; 

    var count = 26; 
    var counter = setInterval(timer, 1000); 
    function timer() 
    { 

     count = count-1; 
     if(count < 0) { 
     clearInterval(counter); 
     return; 
     } 

     document.getElementById("timer").innerHTML=count; 
    } 

document.getElementById("countTimers").innerHTML=timersCount; 
} 

HTML

<button id="pause">Pause</button> 
<button id="resue">Resume</button> 

這個函數運行正常。但現在我想添加暫停和恢復倒計時。是否可以將其設置爲我的功能。請幫忙。

Answer 1

你在這裏。首先，你只需要一個時間間隔，其次你應該有一些標誌告訴你什麼時候定時器暫停。然後它只是簡單的邏輯和2個監聽器。

var timersCount = 0; 
 
var pause = false; //is timer paused 
 

 
countTimers(); 
 

 
function countTimers() { 
 
    timersCount++; 
 

 
    var count = 26; 
 
    var counter = setInterval(timer, 1000); 
 

 
    function timer() { 
 
    if (!pause) { //do something if not paused 
 
     count = count - 1; 
 
     if (count < 0) { 
 
     clearInterval(counter); 
 
     setTimeout(countTimers, 5000); //start count from 26 again 
 
     return; 
 
     } 
 

 
     document.getElementById("timer").innerHTML = count; 
 
    } 
 
    } 
 

 
    document.getElementById("countTimers").innerHTML = timersCount; 
 
} 
 

 
document.getElementById('pause').addEventListener('click', function() { 
 
\t pause = true; 
 
}); 
 

 
document.getElementById('resume').addEventListener('click', function() { 
 
\t pause = false; 
 
});

<span id="timer"></span> 
 
<span id="countTimers"></span> 
 
<button id="pause">Pause</button> 
 
<button id="resume">Resume</button>