jQuery原创倒计时特效小插件

jQuery原创倒计时特效小插件

一个使用jQuery写的简单倒计时小插件,此插件依赖jQuery版本1.8,css样式部分可以参考现在的countDown.css自己定义,结构比较简单,使用时先定义一个html容器,对标签没有限制。

使用方法
在页面引入HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p><input type="hidden" name="countDown" data-prefix="请在" data-suffix="内完成支付" value="2018/11/20 12:25:32"> <span></span>
</p>
<p>
    <input type="hidden" name="countDown" data-prefix="请在" data-suffix="内提交订单" value="2018/11/10 22:10:22"> <span></span>
</p>
<p>
    <input type="hidden" name="countDown" data-prefix="距离活动结束仅有" value="2019/12/01 22:30:27"> <span></span>
</p>
<p>
    <input type="hidden" name="countDown" data-title="抢购结束"  value="2018/12/15 12:24:50"> <span></span>
</p>
<p>
    <input type="hidden" name="countDown"  data-suffix="后将上映大片" value="2018/12/10 23:46:33"> <span></span>
</p>

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("input[name='countDown']").each(function () {
    var time_end=this.value;
    var con=$(this).next("span");
    var _=this.dataset;
    countDown(con,{
        title:_.title,//优先级最高,填充在prefix位置
        prefix:_.prefix,//前缀部分
        suffix:_.suffix,//后缀部分
        time_end:time_end//要到达的时间
    })
    //提供3个事件分别为:启动,重启,停止
    .on("countDownStarted countDownRestarted  countDownEnded ",function (arguments) {
        console.info(arguments);
    });
});
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论