基于jQuery倒计时插件实现团购秒杀效果

最新推荐文章于 2020-06-13 18:15:53 发布

会飞的小祥

最新推荐文章于 2020-06-13 18:15:53 发布

阅读量887

点赞数 1

分类专栏： js注入

本文链接：https://blog.csdn.net/qq_27289001/article/details/52671862

版权

js注入专栏收录该内容

4 篇文章 0 订阅

订阅专栏

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery倒计时超级实现团购秒杀效果，感兴趣的朋友一起学习吧！

1.1 帮助文档关键字

　　　　倒计时秒杀 timer

1.2. 使用场景

　　　　这样的倒计时在购物网站中会经常使用到，比如秒杀，限时抢购，确认收货倒计时。

　　　　这个功能并不难实现，就是利用js的定时执行，搜了一下网上的代码，五花八门，都是一个方法，没有做到封装，方便使用，所以写了一个插件，方便项目中使用。

1.4. 使用说明

　　　　开始使用

　　　　1、引入oao.timer.js

　　　　2、要显示倒计时时间的div

1 2	`<div id=` `"timer1"` `end-date=` `"2016-1-1"` `></div>` 　　　　　`<div id=` `"timer2"` `end-date=` `"2015/10/1 12:5:2"` `></div>Code:`

　　　　3、初始化倒计时

 
        $( 
        function 
        (){ 
        //文档加载完初始化倒计时 
       
        　　　　　 $( 
        "#timer1" 
        ).oaoTime(); 
       
        　　　　　 $( 
        "#timer2" 
        ).oaoTime(); 
       
        　　　})

这样就可以使用了，很简单，这样便于项目开发中统一使用，统一修改。

1.5. 上代码

 
        //倒计时的插件 
       
        $.fn.extend({ 
       
        oaoTime: 
        function 
        (){ 
       
        this 
        .each( 
        function 
        () {  
       
        var 
        dateStr = $( 
        this 
        ).attr( 
        "end-date" 
        ); 
       
        var 
        endDate =  
        new 
         Date(dateStr.replace(/-/g, 
        "/" 
        )); 
        //取得指定时间的总毫秒数  
       
        //now是在动态页面中取得服务器的时间，如果没有定义使用客户端时间 
       
        if 
        (now==undefined){ 
       
        　　　　　　　　now =  
        new 
        Date().getTime(); 
       
        　　　　　　} 
       
        var 
        tms = endDate - now; 
        //得到时间差 
       
        if 
        (tms<0){alert( 
        "时间过期了" 
        ); 
        return 
        ;} 
       
        $.oaoTime.timers.push({tms:tms,content:$( 
        this 
        )}); 
       
        $.oaoTime.start(); 
       
        }); 
       
        } 
       
        }); 
       
        //倒计时的插件 
       
        $.oaoTime={ 
       
        //倒计时容器，所有需要倒计时的时间都需要注册到这个容器中，容器中放的是一个object，object描述了倒计时的结束时间，以及显示时间的jquery对象(例如div) 
       
        timers:[], 
       
        //全局的一个倒计时状态，init表示初始化状态，start表示运行中状态，stop表示停止状态 
       
        status: 
        'init' 
        , 
       
        //计算时间并定时刷新时间的方法，本插件的核心代码 
       
        takeCount: 
        function 
        (){ 
       
        //如果定时器没有启动不执行 
       
        if 
        ( 
        this 
        .status !=  
        'start' 
        ) 
        return 
        ; 
       
        setTimeout( 
        "$.oaoTime.takeCount()" 
        , 1000 ); 
       
        var 
         timers =  
        this 
        .timers; 
       
        for 
         ( 
        var 
        i = 0, j = timers.length; i < j; i++) { 
       
        //计数减一 
       
        timers[i].tms -= 1000; 
       
        //console.info(timers[i].tms); 
       
        //计算时分秒 
       
        var 
         days = Math.floor(timers[i].tms / (1000 * 60 * 60 * 24)); 
       
        var 
         hours = Math.floor(timers[i].tms / (1000 * 60 * 60)) % 24; 
       
        var 
         minutes = Math.floor(timers[i].tms / (1000 * 60)) % 60; 
       
        var 
         seconds = Math.floor(timers[i].tms / 1000) % 60; 
       
        if 
         (days < 0)days = 0; 
       
        if 
         (hours < 0)hours = 0; 
       
        if 
         (minutes < 0)minutes = 0; 
       
        if 
         (seconds < 0) seconds = 0; 
       
        var 
         newTimeText = days+ 
        "天" 
        +hours+ 
        "小时" 
        +minutes+ 
        "分" 
        +seconds+ 
        "秒" 
        ; 
       
        timers[i].content.text(newTimeText); 
       
        //console.info(newTimeText); 
       
        } 
       
        }, 
       
        //启动倒计时 
       
        start: 
        function 
        (){ 
       
        if 
        ( 
        this 
        .status== 
        'init' 
        ){ 
       
        this 
        .status =  
        'start' 
        ; 
       
        this 
        .takeCount(); 
       
        } 
       
        }, 
       
        //停止倒计时 
       
        stop: 
        function 
        (){ 
       
        this 
        .status =  
        'stop' 
        ; 
       
        } 
       
        };  
       
        <!DOCTYPE html PUBLIC  
        "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
        > 
       
        <html xmlns= 
        "http://www.w3.org/1999/xhtml" 
        > 
       
        <head> 
       
        <meta http-equiv= 
        "Content-Type" 
        content= 
        "text/html; charset=gb2312" 
        /> 
       
        <title>无标题文档</title> 
       
        <script type= 
        "text/javascript" 
        src= 
        "js/jquery-1.9.1.min.js" 
        ></script> 
       
        <script type= 
        "text/javascript" 
        src= 
        "js/oao.timer.js" 
        ></script> 
       
        </head> 
       
        <body> 
       
        <ul> 
       
        <div id= 
        "stop" 
        >停止</div> 
       
        <div id= 
        "timer1" 
        end-date= 
        "2016-1-1" 
        ></div> 
       
        <div id= 
        "timer2" 
        end-date= 
        "2015/10/1 12:5:2" 
        ></div> 
       
        </ul> 
       
        </body> 
       
        </html> 
       
        <script> 
       
        $( 
        function 
        (){ 
       
        $( 
        "#stop" 
        ).click( 
        function 
        () { 
       
        $.oaoTime.stop(); 
       
        }); 
       
        $( 
        "#timer1" 
        ).oaoTime(); 
       
        $( 
        "#timer2" 
        ).oaoTime(); 
       
        }) 
       
        </script>