要使用倒數計時功能找到一隻很方便的 plugin- jQuery.countdown,基本的使用方法是把 plugin 讀入後像這樣寫:
- $("#getting-started")
- .countdown("2017/01/01", function(event) {
- $(this).text(
- event.strftime('%D days %H:%M:%S')
- );
- });
可以依據自己的需求去顯示時分秒甚至是週、月、年都可以。
若是要在一個頁面裡面顯示很多個倒數計時,這個若是在做活動頁面應該會有機會用到,寫法如下:
- <div data-countdown="2016/01/01">div>
- <div data-countdown="2017/01/01">div>
- <div data-countdown="2018/01/01">div>
- <div data-countdown="2019/01/01">div>
- $('[data-countdown]').each(function() {
- var $this = $(this), finalDate = $(this).data('countdown');
- $this.countdown(finalDate, function(event) {
- $this.html(event.strftime('%D days %H:%M:%S'));
- });
- });
有需要的話再去調整每一個時間顯示的樣子,想看更多範例可以看官方文件。
我有把這個做在 Pokemon GO 活動列表上。