計時器到0時停止jquery倒計時

Question

嗨，我在我的項目鏈接中使用一個jQuery倒數計時器

jQuery倒計時

我正在編寫以下代碼來初始化計時器

var fiveSeconds = new Date().getTime() + 5000;
$('#spanTimer').countdown(fiveSeconds, {elapse: true})
    .on('update.countdown', function(event) {
        var $this = $(this);
        if (event.elapsed) {
            $this.html(event.strftime('After end: <span>%H:%M:%S</span>'));
        } else {
            $this.html(event.strftime('To end: <span>%H:%M:%S</span>'));
        }
    });

計時器設置為05秒或我經過的秒數。 我遇到的問題是，當計時器達到00:00:00時，我無法停止計時器。 我的意思是重置。 我究竟做錯了什么？ 我如何獲得計時器已達到00:00:00的警報？ 我是jQuery倒計時的新手。

Answer 1

刪除elapsed：true，並使用finish.countdown回調。 這就是它的目的。 並且閱讀了手冊，寫得非常好。

請注意，我不需要知道計時器的值，on（'finish.countdown'...）使所有操作對我而言都是透明的。 如果將finish.countdown觸發，那么我知道計時器達到了零。

 var fiveSeconds = new Date().getTime() + 5000; $('#spanTimer').countdown(fiveSeconds) // removed the elapsed: true .on('update.countdown', function(event) { var $this = $(this); if (event.elapsed) { $this.html(event.strftime('After end: <span>%H:%M:%S</span>')); } else { $this.html(event.strftime('To end: <span>%H:%M:%S</span>')); } }) // added a finish.countdown callback, to // hide the countdown altogether and // have a little fun. .on('finish.countdown', function(){ $(this).hide(); $("#boomRoom").show(); }); 

 #boomRoom { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js"></script> <div id="spanTimer"> </div> <div id="boomRoom"> <img src="http://bestanimations.com/Military/Explosions/atomic-mushroom-cloud-explosion-2-2.gif"/> </div>