html5 倒计时插件,基于HTML5 time元素的倒计时jquery插件

这是一款简单的基于HTML5 time元素的倒计时jquery插件。该jquery倒计时插件提供默认的翻牌样式，可以在所有支持HTML5 time元素的浏览器中正常工作。

安装

可以通过npm来安装jquery.countdown.js插件。

npm install jquery.countdown

使用方法

在页面中引入jquery、jquery.countdown.js。

HTML结构

要创建一个倒计时，可以通过元素的datetime属性来创建。

Friday, December 13th, 2013 5:43pm

Expires in 2 hours 30 minutes 30 seconds

61 days

也可以通过一个有效的时间字符串来创建。

12:30

12:30:39

12:30:39.929

P2D

PT01H01M15S

PT20M20S

PT10S

600 days, 3:59:12

00:59:00

3:59:12

或者是一个日常使用的时间表示字符串。

24h00m59s

2h 0m

4h 18m 3s

600 days, 3:59:12

600 jours, 3:59:12

00:01

240:00:59

初始化插件

在页面DOM元素加载完毕之后，可以通过countDown()方法来初始化该倒计时插件。

$('div, h1, time').countDown();

配置参数

jquery.countdown.js插件的可用配置参数有：

css_class：生成的元素的class名称。默认为countdown。

always_show_days：总是显示天数。默认为false。

with_labels：是否显示标签。默认为true。

with_seconds：是否显示秒数。默认为true。

with_separators：是否显示天、小时、分钟和秒数之间的分隔符。默认为true。

with_hh_leading_zero：是否前导0的2位数小时数。默认为true。

with_mm_leading_zero：是否前导0的2位数分钟数。默认为true。

with_ss_leading_zero：是否前导0的2位数秒数。默认为true。

label_dd：天数的标签。默认为days。

label_hh：小时数的标签。默认为hours。

label_mm：分钟数的标签。默认为minutes。

label_ss：秒数的标签。默认为seconds。

separator：小时、分钟和秒之间的分隔符。默认为:。

separator_days：天数和小时之间的分隔符。默认为,。

事件

time.elapsed：倒计时结束时立刻触发该事件。

$('#my-countdown').on('time.elapsed', function () {

// do something...

});

time.tick：默认情况下，该事件每秒钟触发一次。

$('#my-countdown').on('time.tick', function (ev, ms) {

// do something...

});