ajax - 使用 jQuery 进行回调倒计时

Question

我使用 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 但不起作用。

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