Question

嗨我在我的项目链接中使用了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，并使用finished.countdown回调。这就是它的目的。阅读手册，写得非常好。

请注意，我不需要知道计时器的价值，而on（＆＃39; finish.countdown＆＃39; ...）会让我一切都透明。如果启动了finish.countdown，那么我知道计时器达到零。

＆＃13;

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

＆＃13;

#boomRoom {
  display:none;
}

＆＃13;

<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>

＆＃13;

当计时器达到0时停止jquery倒计时

1 个答案: