当前位置:

Zepto/jQuery 倒计时插件

温馨提示:本文共421个字,读完预计2分钟。

昨天项目中需要做一个抢购页面,PC端和WAP端的列表中每个都有倒计时,于是封装了一个简单版的插件供自己使用,项目已经放在我的GitHub上。

Demo:

https://hehaibao.github.io/countdown/index.html

效果预览

Zepto/jQuery 倒计时插件-何海宝的博客

使用方法

1. 引入zepto/jquery
2. 引入countdown.js
3. dom结构写好,例如:

1
2
3
4
5
6
7
<ul>
    <li>1. <span data-countdown="2018/06/05 13:08:00"></span></li>
    <li>2. <span data-countdown="2040/08/05 23:11:30"></span></li>
    <li>3. <span data-countdown="2018/06/08 09:11:02"></span></li>
    <li>4. <span data-countdown="2020/02/08 10:30:39"></span></li>
    <li>5. <span data-countdown="2019/01/05 10:00:08"></span></li>
</ul>

4. 调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function(){
    //默认调用
    // $('[data-countdown]').countdown();
 
    //自定义调用
    $('[data-countdown]').countdown({
        txt: '距离活动结束还有:',
        sp: '-',
        callback: function(v){
            //活动结束后的回调
            $(v).parents('li').addClass('red');
        }
    });
}());

ok,完成!

欢迎使用,如有bug请在GitHub上提出,此处不能及时看到~ 谢谢·

版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句

  • 1 条回应
    • 头像
      藏金网 发表于

      这个博客就像一座宝藏,我是来掘金滴!