jquery.countdown 倒计时插件的学习

1.第一种简单的使用  第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD  MM/DD/YYYY
YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm:ss 具体格式可以查一下官方文档，第二个参数是回调函数
$('div#clock').countdown(finalDate[, callback]);
eg：这个是我项目中的部分源码

function timePast(data,divId){// divId是我外界穿过来的id$('#' + divId).countdown(data, function(event) {

        var $this = $(this).html(event.strftime(''
            + '<span>%M</span> 分 '
            + '<span>%S</span> 秒'));

        if (event.type == 'finish'){//倒计时完成
        }});
}

2.第二种简单的使用  第一个时间是你的倒计时截止事件，第二个参数是倒计时正在进行回调函数，你在这里面可以进行倒计时的显示处理
第三个参数是你倒计时完成时的回调函数
eg:

function timePast(data,divId){      $('#' + divId).countdown(data).on('update.countdown', function () {var $this = $(this).html(event.strftime(''
                + '<span>%M</span> 分 '
                + '<span>%S</span> 秒'));
        }).on('finish.countdown', function () {//倒计时完成

        });
}

3.第三种使用 第一个参数不解释大家都懂的，第二参数传一个对象，里面是一些配置参数 elapse参数是bool值，当倒计时完成是否继续，
precison是更新的间隔时间单位毫秒， defer 翻译过来是定义初始化模式，具体还不清楚怎么使用，这个研究后稍后会更新，后面可以
像上面的方法以一样.on链式执行其他方法
$('div#clock').countdown(finalDate, {elapse:     '{bool} Allow to continue after finishes',precision:  '{int} The update rate in milliseconds',defer:      '{bool} Deferred initialization mode'
})

格式化时间：

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

前导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	剩余的秒数

API文档：http://hilios.github.io/jQuery.countdown/documentation.html

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

jquery.countdown 倒计时插件的学习相关推荐

jQuery自适应倒计时插件
jQuery自适应倒计时插件在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
php++倒计时插件下载,jQuery实现倒计时插件
本文将使用jQuery开发一个倒计时效果插件,使用这个插件你可以生成一个非常炫的倒计时器,你可以方便的整合到你需要的web功能模块中,希望大家喜欢! 以下代码将演示如何调用上述插件: $(functi ...
vue 倒计时插件_Vue学习笔记-倒计时插件
安装 1.cnpm/npm npm install vue2-countdown --save 2.Git 下载源码 git clone https://github.com/cgygd/vue2-c ...
html5 倒计时插件,基于HTML5 time元素的倒计时jquery插件
这是一款简单的基于HTML5 time元素的倒计时jquery插件.该jquery倒计时插件提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作. 安装可以通过npm来安装j ...
jquery.countdown.js一个时间倒计时的插件
1 http://hilios.github.io/jQuery.countdown/ 到官网上下载插件 2 <div id="getting-started">< ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
jquery发送手机验证码倒计时插件支持页面刷新
在最新项目中需要用到发送短信短信验证码,网上搜了半天找不到满意的,就自己写了一个. jquery封装好的发送手机验证码倒计时插件采用cookie 防止页面刷新. 实现思路: 1.实现点击按钮,对手机 ...
html广告20s倒计时,简单时尚的jQuery倒计时插件
SyoTimer是一款简单时尚的jQuery倒计时插件.该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全.它的特点还有: 在计时器计时结束之后的回调函数中可以修改计时器的结构. 可以周期的 ...

jquery.countdown 倒计时插件的学习

jquery.countdown 倒计时插件的学习相关推荐

最新文章

热门文章