zoukankan      html  css  js  c++  java
  • jquery插件之倒计时-团购秒杀

     

    1.1 帮助文档关键字

        倒计时 秒杀 timer

    1.2.  使用场景

                           

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

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

    1.4.  使用说明

        开始使用

        1、  引入oao.timer.js

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

          <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是在动态页面中取得服务器的时间,如果没有定义使用客户端时间
               try{
                if(now==undefined);
               }catch(e){
                  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';
        },
        //清空倒计时
        clear:function(){
            this.timers.forEach(function(row){
                row.content.text("");
            })
            
            this.timers = [];
        }
    
    
    };
    <!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=utf-8" />
    <title>无标题文档</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
    <script type="text/javascript" src="oao.timer.js"></script>
    </head>
    
    <body>
    
    <ul>
      <div id="stop">停止</div> <div id="update">更新</div>
    
      <div id="timer1" end-date="2017-9-28"></div>
    
      <div id="timer2" end-date="2017/10/1 12:5:2"></div>
    </ul>
    </body>
    </html>
    <script>
        $(function(){
    
            $("#stop").click(function() {
                $.oaoTime.stop();
            });
    
            $("#update").click(function() {
                $.oaoTime.clear();
                $("#timer1").attr("end-date","2017-10-4");
                $("#timer1").oaoTime();
            });
    
            $("#timer1").oaoTime();
    
          
        })
        
    
    </script>

     写的比较仓促,希望大家指出不好的地方,有更好的方案希望能够拿出来分享,觉得可取,拿去使用。

    作者:徐飞
    出处:www.cnblogs.com/xumanbu/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    A+B for Input-Output Practice (VIII)
    A+B for Input-Output Practice (VI)
    A+B for Input-Output Practice (VII)
    A+B for Input-Output Practice (IV)
    1.1.4 A+B for Input-Output Practice (V)
    1.1.3 A+B for Input-Output Practice (III)
    基础练习 龟兔赛跑预测
    基础练习 回形取数
    Python实用黑科技——以某个字段进行分组
    Python黑科技神奇去除马赛克
  • 原文地址:https://www.cnblogs.com/xumanbu/p/4645675.html
Copyright © 2011-2022 走看看