使用jQuery回调倒计时

时间:2013-07-12 10:18:25

标签: ajax jquery countdown

我使用Rendro倒计时(http://github.com/rendro/countdown/

    $('.countdown.callback').countdown({
      date: +(new Date) + 10000,
      render: function(data) {
        $(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
      },
      onEnd: function() {
        $(this.el).addClass('ended');
      }
    }).on("click", function() {
      $(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
    });

样式输出

  <div class="countdown styled"></div>

  <h2>Countdown with callback</h2>
  <p>Click on the green box to reset the counter to 10 sec.</p>
  <div class="countdown callback"></div>

如何在倒计时= 0后自动将计数器(不点击)重置回10? 我尝试将onclick函数插入onEnd但不起作用。

1 个答案:

答案 0 :(得分:1)

尝试重置date选项并在执行start([refreshRate])后调用onEnd函数中的addClass方法。 这应该重新开始倒计时。

类似的东西:

 $('.countdown.callback').countdown({
    date: +(new Date) + 10000,
    render: function(data) {
        $(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
    },
    onEnd: function() {
        $(this.el).addClass('ended');
        this.update(+(new Date) + 10000);
        this.start(1000);
    }
}).on("click", function() {
    $(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
});

在这里看一个小提琴:http://jsfiddle.net/MaurizioPiccini/xDy5d/