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

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在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>

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

jQuery倒计时（仿团购）
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能. 查看演示 ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
html广告20s倒计时,简单时尚的jQuery倒计时插件
SyoTimer是一款简单时尚的jQuery倒计时插件.该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全.它的特点还有: 在计时器计时结束之后的回调函数中可以修改计时器的结构. 可以周期的 ...
基于android的团购app设计与实现,基于Android的掌上团购App设计与实现
摘要: 传统的商品交易模式受到时间和空间的限制,各种缺陷开始出现,已经不能适应现代互联网时代的需要.移动互联网与智能手机技术为人们生活带来了极大的便捷,通过移动互联网用户可以随时随地的获取信息,或者是 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
漂亮实用的jQuery倒计时插件特效代码
原文:漂亮实用的jQuery倒计时插件特效代码源代码下载地址:http://www.zuidaima.com/share/1799598875675648.htm

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

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

最新文章

热门文章