当前位置: 首页 » 前端开发 » Zepto/jQuery 倒计时插件
 |  全屏浏览  |  字号调整:

Zepto/jQuery 倒计时插件

2018-06-05 13:35:10 前端开发 1 1.02 k 百度已收录
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六下午好, 本文除去代码部分,共421个字,预计阅读时间需要2分钟。

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

Demo:

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

效果预览

使用方法

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上提出,此处不能及时看到~ 谢谢·

本文标题:Zepto/jQuery 倒计时插件

本文地址:http://www.hehaibao.com/zepto-jquery-countdown/

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

一条评论
  • 藏金网 - Windows 7  |  搜狗浏览器 2.X

    2018-06-07 10:19

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


发表评论

电子邮件地址不会被公开。 必填项已用*标注