功能齐全的jQuery倒计时插件

jQuery.countdown是一款功能齐全的jQuery倒计时插件。jQuery.countdown.js一个文件中集合了所有的倒计时功能，它能够显示各种时间格式，并提供回调函数。它的特点还有：

• 内置各种时间格式。
• 多元化支持。
• 支持i118。
• 支持日期从2011年开始。

安装

可以通过bower来安装jQuery.countdown插件。

bower install jquery.countdown                  
                

使用方法

在页面中引入jquery1.7+和jquery.countdown.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.countdown.js"></script>             
                

HTML结构

可以使用任何DOM元素作为容器。

<span id="clock"></span>  
                

初始化插件

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

$('div#clock').countdown(finalDate[, callback]);
                

该插件也支持jQuery的.on()方法来处理回调函数。

$('div#clock').countdown(finalDate)
    .on('update.countdown', callback)
    .on('finish.countdown', callback);                 
                

配置参数

finalDate：要倒计时的目标时间。该参数可以是以下任意格式：

• 一个原生的日期对象。
• 时间的毫秒数。
• 字符串格式的日期：
  • YYYY/MM/DD
  • MM/DD/YYYY
  • YYYY/MM/DD hh:mm:ss
  • MM/DD/YYYY hh:mm:ss

callback：回调函数。

配置对象

插件可以在第二个参数中接收一个配置对象。通过该配置对象可以自定义插件。

$('div#clock').countdown(finalDate, {
  elapse:     '{bool} Allow to continue after finishes',
  precision:  '{int} The update rate in milliseconds'
})                  
                

事件

该倒计时插件在状态改变时会触发下面的一些事件：

• update.countdown
• finish.countdown
• stop.countdown

事件对象

多数情况下你需要event.strftime来格式化倒计时器，你可以访问下面的所有参数值：

{
    type:           '{String} The namespaced event type {update,finish,stop}.countdown',
    strftime:       '{Function} The formatter function',
    finalDate:      '{Date} The parsed final date native object',
    elapsed:        '{bool} Passed away the final date?'
    offset: {
        seconds:    '{int} Seconds left for the next minute',
        minutes:    '{int} Minutes left for the next hour',
        hours:      '{int} Hours left until next day',
        daysToWeek: '{int} Days left until next week'
        daysToMonth:'{int} Days left until next month'
        totalDays:  '{int} Total amount of days left until final date',
        weeks:      '{int} Weeks left until the final date',
        months:     '{int} Months left until final date' ,
        years:      '{int} Year left until final date'
    }
}                 
                

格式化时间

event.strftime为格式化时间的方法，它根据给定的格式字符串中的指令来格式化偏移日期。它的格式是使用%符号来分隔参数，任何不带%符号的字符串将被原样输出。

event.strftime('%W weeks %-d days %-H h %M min %S sec');
// => 1 星期 2 天 3 小时 04 分 05 秒                  
                

数值可以前导0，或不带0。如果不带0则需要在数值前添加-符号。

jQuery.countdown倒计时插件的github地址为：https://github.com/hilios/jquery.countdown