天天看點

jquery.countdown 倒計時插件的學習

1.第一種簡單的使用  第一個時間是你的倒計時截止時間,finalDate格式可以是YYYY/MM/DD  MM/DD/YYYY 
YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm:ss 具體格式可以查一下官方文檔,第二個參數是回調函數
$('div#clock').countdown(finalDate[, callback]);
eg:這個是我項目中的部分源碼            
function timePast(data,divId){

// divId是我外界穿過來的id
    $('#' + divId).countdown(data, function(event) {

        var $this = $(this).html(event.strftime(''
            + '<span>%M</span> 分 '
            + '<span>%S</span> 秒'));

        if (event.type == 'finish'){
            //倒計時完成
        }
    });
}      
2.第二種簡單的使用  第一個時間是你的倒計時截止事件,第二個參數是倒計時正在進行回調函數,你在這裡面可以進行倒計時的顯示處理
第三個參數是你倒計時完成時的回調函數
eg:
            
function timePast(data,divId){
   
    $('#' + divId).countdown(data)
        .on('update.countdown', function () {
            var $this = $(this).html(event.strftime(''
                + '<span>%M</span> 分 '
                + '<span>%S</span> 秒'));
        })
        .on('finish.countdown', function () {
            //倒計時完成

        });
}      
3.第三種使用 第一個參數不解釋大家都懂的,第二參數傳一個對象,裡面是一些配置參數 elapse參數是bool值,當倒計時完成是否繼續,
precison是更新的間隔時間機關毫秒, defer 翻譯過來是定義初始化模式,具體還不清楚怎麼使用,這個研究後稍後會更新,後面可以
像上面的方法以一樣.on鍊式執行其他方法
$('div#clock').countdown(finalDate, {
  elapse:     '{bool} Allow to continue after finishes',
  precision:  '{int} The update rate in milliseconds',
  defer:      '{bool} Deferred initialization mode'
})
           

格式化時間:

使用event.strftime為格式化時間,它根據給定的格式字元串中的指令來格式化偏移日期。它的格式是使用%符号來分隔參數,任何不帶%符号的字元串将被原樣輸出。

前導0格式(Directive) 不帶前導0(Blank-padded) 描述
%Y %-Y 倒計時年份
%m %-m 倒計時月份
%n %-n Days left until the next complete month
%w %-w 倒計時星期
%d %-d 倒計時天數
%D %-D 剩餘的總天數
%H %-H 剩餘的小時數
%M %-M 剩餘的分鐘數
%S %-S 剩餘的秒數

API文檔:http://hilios.github.io/jQuery.countdown/documentation.html

jQuery.countdown倒計時插件的github位址為:https://github.com/hilios/jquery.countdown

繼續閱讀