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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：763 次日期：2016-07-01 09:43:34

温馨提示：小编为您整理了“基于jQuery倒计时插件实现团购秒杀效果”,方便广大网友查阅！

倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery倒计时超级实现团购秒杀效果，感兴趣的朋友一起学习吧

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery倒计时超级实现团购秒杀效果，感兴趣的朋友一起学习吧！

1.1 帮助文档关键字

倒计时秒杀 timer

1.2. 使用场景

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

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

1.4. 使用说明

开始使用

1、引入oao.timer.js

2、要显示倒计时时间的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">

<head>

<title>无标题文档</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

$(function(){

$("#stop").click(function() {

$.oaoTime.stop();

});

$("#timer1").oaoTime();

$("#timer2").oaoTime();

})

</script>

以上内容是小编给大家介绍的基于jQuery倒计时插件实现团购秒杀效果，希望对大家有所帮助！

上一篇：基于JS实现的笛卡尔乘积之商品发布

下一篇：最简单的tab切换实例代码

手机网站地址：基于jQuery倒计时插件实现团购秒杀效果

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！