如何进行自动倒计时，点击javascript继续倒计时

How to have an automatic countdown, keep counting down on click javascript

本文关键字：倒计时 点击 javascript 继续 何进行      更新时间：2023-09-26

我想要一个简单的倒计时，一个在时间结束时自动开始的倒计时和一个在我点击按钮时开始的倒计数。

我一直在努力解决这个问题，我做了下面的代码，我不能同时做这两个选项，我成功地做了以下代码：当倒计时结束时，它再次统计，请查看片段

我无法做到这一点，这是我的代码：

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>

你知道怎么解决这个问题吗？？

感谢

试试这个，你必须有一个$（document）.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演示

相关文章：