HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

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

2016-12-28 09:33| 发布者: admin| 查看: 607| 评论: 0

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

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

 安装

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

npm install jquery.countdown       
        

 使用方法

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

 
 
 HTML结构

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



    

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

12:30
12:30:39
12:30:39.929

或者通过一个有效的duration字符串来创建。

P2D
PT01H01M15S
PT20M20S
PT10S

或者是Python timedelta 对象的时间字符串。

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

或者是可以被JavaScript Date.parse() 函数解析的字符串。

 初始化插件

在页面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...
});

jquery.countdown.js倒计时插件的github地址为:https://github.com/kemar/jquery.countdown


鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 16:28

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部