2018年10月30日 星期二

[jQuery Plugin] 倒數計時- jQuery.countdown



要使用倒數計時功能找到一隻很方便的 plugin- jQuery.countdown,基本的使用方法是把 plugin 讀入後像這樣寫:

  1. $("#getting-started")   
  2.   .countdown("2017/01/01"function(event) {   
  3.     $(this).text(   
  4.       event.strftime('%D days %H:%M:%S')   
  5.     );   
  6.   });  

可以依據自己的需求去顯示時分秒甚至是週、月、年都可以。

若是要在一個頁面裡面顯示很多個倒數計時,這個若是在做活動頁面應該會有機會用到,寫法如下:

  1. <div data-countdown="2016/01/01"></div>  
  2. <div data-countdown="2017/01/01"></div>  
  3. <div data-countdown="2018/01/01"></div>  
  4. <div data-countdown="2019/01/01"></div>  

  1. $('[data-countdown]').each(function() {   
  2.   var $this = $(this), finalDate = $(this).data('countdown');   
  3.   $this.countdown(finalDate, function(event) {   
  4.     $this.html(event.strftime('%D days %H:%M:%S'));   
  5.   });   
  6. });  

有需要的話再去調整每一個時間顯示的樣子,想看更多範例可以看官方文件

我有把這個做在 Pokemon GO 活動列表上。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...