Как сделать автоматический обратный отсчет, продолжать отсчет по щелчку javascript

Question

Я хочу простой отсчет, обратный отсчет, который начинается автоматически по истечении времени и обратный отсчет, который начинается, когда я нажимаю кнопку.

Я пытался решить эту проблему, и я сделал код ниже, я не могу сделать оба варианта, мне удалось сделать следующий код: когда обратный отсчет закончится, он снова закроется, см. Фрагмент

мне не удалось сделать это, вот мой код:

JS

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(); 
}); 

HTML

<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

Попробуйте это, вы должны иметь $ (документ) .ready функции.

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.restart = function() { 
     seconds = options.seconds; 
    } 

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

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

$(document).ready(function() { 
    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").on('click', function() { 
     myCounter.restart(); 
    }); 
}); 

Plunker demo