Countdown với jquery.coundown

Để cài đặt bộ đếm lùi trên các view có rất nhiều cách khác nhau nhưng ở bài viết này mình xin hướng dẫn các bạn cách đếm lùi bằng thư viện jquery.coutdown

Cài đặt:

Cách 1: Cài đặt với bower

    bower install jquery.countdown

Cách 2: Download file js tại

    https://github.com/hilios/jQuery.countdown/releases/download/2.2.0/jquery.countdown-2.2.0.zip

Sau đó require hoặc import vào project của mình. Xong bây giờ enjoy thôi

Cơ bản:

<div id="getting-started"></div>  <!--thẻ này sẻ hiển thị thời gian countdown -->
<script type="text/javascript">
  $('#getting-started').countdown('2018/01/01 12:30:00', function(event) { //Thời gian sẻ được tính từ thời gian hiện tại đến thời gian được xét
    $(this).html(event.strftime('%w weeks %d days %H:%M:%S')); //format định dạng bộ đếm
  }).on('finish.countdown', function(event) { //sự kiện lúc bộ đệm về 0, lúc này bộ đếm sẻ dừng lại.
      ...code...
  });
  $('#getting-started').countdown('pause'); //Dừng countdown
  $('#getting-started').countdown('resume'); //Tiếp tục countdown
</script>

Format:

• %m: months
• %w: weeks
• %d: days
• %H: hours
• %M: minutes
• %S: seconds

Nâng cao:

Để countdown nhiều bộ đếm khác nhau: ví dụ: khi chạy code dưới đây sẻ sinh ra 4 bộ đếm khác nhau

//html
<div class="test" data-countdown="2016/01/01"></div>
<div class="test" data-countdown="2017/01/01"></div>
<div class="test" data-countdown="2018/01/01"></div>
<div class="test" data-countdown="2019/01/01"></div>

//js
$('.test').each(function() {
  var $this = $(this), finalDate = $(this).data('countdown');
  $this.countdown(finalDate, function(event) {
    $this.html(event.strftime(%H:%M:%S'));
  });
});

Tiếp tục sau khi đếm hết thời gian ví dụ: khi chạy code dưới đây hàm countdown sẻ tiếp tục đếm tiến tiếp

//html
<div id="clock"></div>

//js
var fiveSeconds = new Date().getTime() + 5000;
$('#clock').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>'));
  }
});

Ngoài ra còn có thêm một một số phần mở rộng các bạn có thể tham khảo tại: http://hilios.github.io/jQuery.countdown/examples Rất mong nhận được sự góp ý của các Anh Chị và cac bạn.

Nguồn: https://github.com/hilios/jQuery.countdown