jquery插件之倒计时-团购秒杀

Posted lljliulljn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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是在动态页面中取得服务器的时间，如果没有定义使用客户端时间
　　　　　　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>

以上是关于jquery插件之倒计时-团购秒杀的主要内容，如果未能解决你的问题，请参考以下文章

第一次写jquery插件，来个countdown计时器吧

jQuery简单倒计时插件

jquery倒计时插件，日期来自Mysql数据库

倒计时之时分秒格式化

js简单时分秒倒计时

倒计时(时分秒)面板