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. JDK5-8特性归纳

    jdk5新特性1.自动装箱和拆箱2.枚举3.静态导入4.可变参数5.內省   是Java语言对Bean类属性.事件的一种缺省处理方法.例如类A中有属性那么,那我们可以通过getName,setName ...

  2. Vmware在NAT模式下网络配置详解

    Vmware在NAT模式下网络配置详解 Linux中的网络配置对于接触Linux不久的小白菜来说,还是小有难度的,可能是不熟悉这种与windows系列迥然不同的命令行操作,也可能是由于对Linux的结 ...

  3. 快速搭建vue2.0+boostrap项目

    一.Vue CLI初始化Vue项目 全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my ...

  4. 【Codeforces 1B】Spreadsheets

    [链接] 我是链接,点我呀:) [题意] A~Z分别对应了1~26 AA是27依次类推 让你完成双向的转换 [题解] 转换方法说实话特别恶心>_< int转string 得像数位DP一样一 ...

  5. 【CodeCraft-19 and Codeforces Round #537 (Div. 2) C】Creative Snap

    [链接] 我是链接,点我呀:) [题意] 横坐标1..2^n对应着2^n个复仇者的基地,上面有k个复仇者(位置依次给出). 你是灭霸你要用以下方法消灭这k个复仇者: 一开始你获取整个区间[1..2^n ...

  6. OpenCV 基于超像素分割的图像区域选取方法及源码

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51386993 工程源码GitHub: ...

  7. [bzoj1468][poj1741]Tree[点分治]

    可以说是点分治第一题,之前那道的点分治只是模模糊糊,做完这道题感觉清楚了很多,点分治可以理解为每次树的重心(这样会把数分为若干棵子树,子树大小为log级别),然后统计包含重心的整个子树的值减去各个子树 ...

  8. 洛谷 P2959 [USACO09OCT]悠闲漫步The Leisurely Stroll

    P2959 [USACO09OCT]悠闲漫步The Leisurely Stroll 题目描述 Bessie looks out the barn door at the beautiful spri ...

  9. [Mini Program] 尺寸单位 rpx

    So each phone's width is 750rpx. And according to the device ratio (width:height), we can calucalate ...

  10. 【安卓笔记】ormlite入门

    ps:写这篇文章的目的是尝试下新的markdown编辑器哈哈 简单介绍 ORMLite provides a lightweight Object Relational Mapping between ...