如何定義一個在Javascript中自動重啓的簡單倒數計時器

Question

我需要一個簡單的倒計時器來倒計時30秒，但是我希望30秒鐘之後重新開始倒計時。

倒計時開始只爲一個時間，倒計時不會重新啓動

我更不知道如何做到這一點，這裏是我的代碼：

var i = 1; 
 
    function Countdown(options) { 
 
    var timer, 
 
    instance = this, 
 
    seconds = options.seconds || 10, 
 
    updateStatus = options.onUpdateStatus || function() {}, 
 
    counterEnd = options.onCounterEnd || function() {}; 
 

 
    function decrementCounter() { 
 
    updateStatus(seconds); 
 
    if (seconds === 0) { 
 
    instance.stop(); 
 
    counterEnd(); 
 
    return; 
 
} 
 
    seconds--; 
 
    } 
 

 
    this.start = function() { 
 
    
 
    timer = 0; 
 
    seconds = options.seconds; 
 
    timer = setInterval(decrementCounter, 1000); 
 
    }; 
 

 
    this.stop = function() { 
 
    clearInterval(timer); 
 
    }; 
 
} 
 

 

 

 

 

 
var myCounter = new Countdown({ 
 
    seconds:5, // number of seconds to count down 
 
    onUpdateStatus: function(sec){$('#countdown').html(sec);}, // callback for each second 
 
    onCounterEnd: function(){  
 
    myCounter.start(); 
 
    } // final action 
 
}); 
 

 
myCounter.start(); 
 
$("#button").click(function() { 
 
    myCounter.start(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="countdown"></p> 
 
<button type="button" id="button">restart</button>

待辦事項你有任何想法如何解決？

謝謝

Answer 1

這是我過去使用過的。

JSFiddle

var refreshTime = 30, //Total refresh time 
    failTime = 30,  //Refresh time 
    timer,    //Holds the interval 
    counter;   //Holds the count number (Seconds) 


$(document).ready(function(){ 
    counter = refreshTime; 
    $('#time').text(counter+" "); 

    timer = setInterval(countDown, 1000); 
}); 


function countDown(){ 
    $("#time").html(counter+" "); 
    if(counter == 0){ 
      counter = failTime; 
    }else{ 
     counter--; 
    } 
} 

Answer 2

window.setInterval(function(){ 
    myCounter.start(); 
}, 30000); 

希望這有助於

Answer 3

只是不得不做一些小的修改，你的代碼來得到它的工作：

var i = 1; 
function Countdown(options) { 
    var timer, 
    instance = this, 
    seconds = options.seconds || 10, 
    updateStatus = options.onUpdateStatus || function() {}, 
    counterEnd = options.onCounterEnd || function() {}; 

    function decrementCounter() { 
    updateStatus(seconds); 
    if (seconds === 0) {  
     seconds = 5; 
    } else { 
     seconds--; 
    } 
    } 

    this.start = function() { 
    clearInterval(timer); 
    timer = 0; 
    seconds = options.seconds; 
    timer = setInterval(decrementCounter, 1000); 
    }; 
} 

var myCounter = new Countdown({ 
    seconds: 5, // number of seconds to count down 
    onUpdateStatus: function(sec){$('#countdown').html(sec);}, // callback for each second 
    onCounterEnd: function(){ myCounter.start(); } // final action 
}); 

myCounter.start(); 

https://jsfiddle.net/6fc14935/

Answer 4

您在回電後致電counter.stop。所以你開始立即停止新的櫃檯。開關像這樣

if (seconds === 0) { 
    instance.stop(); 
    counterEnd(); 
    return; // don't want to decriment after counterEnd(); 
} 

Answer 5

順序就寫了這個fiddle的樂趣：

function mySwitch() { 
    button = document.getElementById("button"); 
    number = document.getElementById("number"); 
    startnumber = number.value; 
    if (button.value == "Start") { 
     button.value = "Stop"; 
     myInterval = setInterval(function() {myCounter()},1000); 
    }else{ 
     button.value = "Start"; 
     clearInterval(myInterval); 
    } 
} 

function myCounter() { 
    if (number.value > 0) { 
     number.value = number.value -1; 
    }else{ 
     number.value = startnumber; 
    } 
}