套件名稱：jQuery Final Countdown
套件功能：處理時間計時相關的功能
GitHub Star：1404 顆
套件來源：http://hilios.github.io/jQuery.countdown/
因為接觸到要使用倒數計時的功能，於是Google之後找到這個套件，接下來會介紹如何使用這個套件
首先連到套件的網頁http://hilios.github.io/jQuery.countdown/，會有套件的基本介紹，上面可以選擇查看說明文件，範例等等
使用的第一步是在需要的頁面載入js
<script src="/bower_components/jquery.countdown/dist/jquery.countdown.js"></script>
需要注意的是目前的2.2版本，支援JQuery 1.7~2.1以上的版本，JQuery 1.6需下載1.0.2版本。
套件介紹
$('div#clock').countdown(finalDate)
.on('update.countdown', callback)
.on('finish.countdown', callback);首先指定一個<span> 用來顯示時間的地方，後面的finalDate則是放入時間參數字串
目前支援的格式
YYYY/MM/DDMM/DD/YYYYYYYY/MM/DD hh:mm:ssMM/DD/YYYY hh:mm:ss
之後再去呼叫需要用到Eevnts
update.countdown//更新畫面上的時間finish.countdown//計時結束時要執行的動作stop.countdown//暫停畫面上的計時
最後再透過event.strftime去格式化要顯示的時間格式，Documentation裡面有詳細的介紹，下面只列出幾個例子參考
event.strftime('%W weeks %-d days %-H h %M min %S sec');
// => 1 week 2 days 3 h 04 min 05 sec
event.strftime('%-D day%!D %H:%M:%S');
// => 1 day 23:45:56 (or) 2 days 23:45:56
// Now in german
event.strftime('%-D tag%!D:e; %H:%M:%S');
// => 1 tag 23:45:56 (or) 2 tage 23:45:56
event.strftime('%S %!S:sekunde,sekunden;');
// => 01 sekunde (or) 02 sekunden
Controls 介紹
如果要讓時間暫停或著繼續的話，可以用以下方法
// Pause the countdown
$('div#clock').countdown('pause');
// Resume the countdown
$('div#clock').countdown('resume');除了上面兩種方法，還有另外兩種名稱不一樣但是功能卻是一樣
// Pause the countdown
$('div#clock').countdown('stop');
// Resume the countdown
$('div#clock').countdown('start');如果想讓時間重新計時，只需要再重新呼叫一次就可以了
$('span#clock').countdown(
finalDate);
範例介紹
HTML：
<div class="countdown">
Limited Time Only!
<span id="clock"></span>
</div>JavaScript
$('#clock').countdown('2020/10/10 12:34:56')
.on('update.countdown', function(event) {
var format = '%H:%M:%S';
if(event.offset.totalDays > 0) {
format = '%-d day%!d ' + format;
}
if(event.offset.weeks > 0) {
format = '%-w week%!w ' + format;
}
$(this).html(event.strftime(format));
})
.on('finish.countdown', function(event) {
$(this).html('This offer has expired!')
.parent().addClass('disabled');
});
發表評論
此篇評論