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则需要在数值前添加-
符号。
前导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 | 剩余的秒数 |
jQuery.countdown倒计时插件的github地址为:https://github.com/hilios/jquery.countdown
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!