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>

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

jquery插件之倒计时-团购秒杀的更多相关文章

  1. [Jquery 插件]活动倒计时，可同步服务器时间，倒计时格式随意设置

    活动倒计时,可同步服务器时间,倒计时格式随意设置 使用说明 /* #活动倒计时,可同步服务器时间 startTime:起始时间 endTime:结束时间 format_str:字符模板 speed:倒 ...

  2. 【JQuery插件】团购倒计时

    案例截图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3. ...

  3. jquery倒计时（仿团购）转至 http://justcoding.iteye.com/blog/2210962

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能.

  4. js实现倒计时 类似团购网站

    一.demo与效果展示 为节约时间,我就直接套用了企鹅团的界面作为demo的背景.因为是倒计时,所以需要一个固定的时间,为了n年后,某位仁兄打开demo页面依然在倒计时,所以我把倒计时时间设成了205 ...

  5. js团购倒计时

    客户端代码可以看: http://www.zhangxinxu.com/wordpress/2010/07/%E5%9B%A2%E8%B4%AD%E7%B1%BB%E7%BD%91%E7%AB%99% ...

  6. 团购类网站倒计时的js实现

    一.如火如荼的团购网站 根据易观国际提供的统计数据,截至2010年6月,中国市场团购网站数量已经突破400家.国内团购潮从今年2月份开始出现,在4~6月出现高峰,尤其是今年5月,一些大的网站如爱帮网. ...

  7. 团购、定时抢购倒计时js版

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

  8. 活动倒计时代码（精确到毫秒）jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. js团购倒计时函数代码

    <h1>团购啦!</h1><p>还剩<span id="times"></span></p> <SCR ...

随机推荐

  1. WebService附加到IIS调试，未命中断点

    写好了一个WebService,部署到IIS上,用浏览器访问发现并不能命中断点. 经过多次的查找发现是由于附加的代码类型选择错误. 下图由于错误的选择了托管代码,导致调试时不命中断点,勾选自动解决.

  2. 51nod1049 最大子段和【动态规划】

    N个整数组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的连续子段和的最大值.当所给的整数均为负数时和为0. 例如:-2,11,-4,13,-5,- ...

  3. 11.best fields策略（dis_max参数设置）

    主要知识点 常规multi-field搜索结果分析 dis_max参数设置     一.为帖子数据增加content字段     POST /forum/article/_bulk { "u ...

  4. 渗透实战（周二）：FLUXION暴力破解WIFI登录口令

    Wi-Fi攻与防 假设我们Kali Linux 攻击机有一个无线网卡,想通过特殊手段连入名称:414的Wi-Fi网络,那以下便是特殊手段的具体过程. Wi-Fi的破解 硬件:MacBook Pro.小 ...

  5. Thawte

    Thawte 公司为 VeriSign(即:现更名为Symantec) 全资子公司,是全球第三大数字证书颁发机构(CA),成立于1995年,自1996年正式提供数字证书产品到1999年占领全球市场的4 ...

  6. 20180828Zabbix3使用percona-zabbix-templates监控MySQL

    引用网址: http://blog.chinaunix.net/uid-16844903-id-3535535.html http://www.ywnds.com/?p=6199 https://ww ...

  7. hdu_1018_Big Number_201308191556

    Big NumberTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  8. OceanBase架构浅析（一）

    简介 OceanBase是阿里集团研发的可扩展的关系数据库,实现了数千亿条记录.数百TB数据上的跨行跨表事务,截止到2012年8月,支持了收藏夹.直通车报表.天猫评价等OLTP和OLAP在线业务,线上 ...

  9. cogs 29. 公路建设

    29. 公路建设 ★   输入文件:road.in   输出文件:road.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] A 国是一个新兴的国家,有 N 个城市,分别 ...

  10. 微信推送给服务器的XML消息解析-springmvc 解析xml数据流

    微信推送给服务器的XML消息解析: 可以使用request.getInputStream(); 获取输入的消息流:但是需要自己解析流: spring mvc自带解析功能: controller中: @ ...