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



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值