功能齐全的jQuery倒计时插件

当前位置:主页 > jQuery库 > 布局和界面 > 功能齐全的jQuery倒计时插件
功能齐全的jQuery倒计时插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-04
    阅读:
麦子学院
简要教程

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

网友评论