基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用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短信验证倒计时功能实现方法详解
本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!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" > &l
-
jquery实现的判断倒计时是否结束代码
本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa
-
jQuery实现的倒计时效果实例小结
本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!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
-
jQuery简单倒计时效果完整示例
本文实例讲述了jQuery简单倒计时效果.分享给大家供大家参考,具体如下: 前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件.今天抽空整理出来,分享给大家. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒计时效果</titl
-
jQuery实现简单倒计时功能的方法
本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"
-
jQuery模拟爆炸倒计时功能实例代码
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动
-
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta
-
jQuery实现发送验证码并60秒倒计时功能
本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma
-
基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项
-
基于jQuery Circlr插件实现产品图片360度旋转
Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示. 它的特点有: 支持水平或垂直方向旋转. 支持移动触摸事件. 支持滚动事件. 图片预加载处理. 可以反向和循环旋转图片. jQ酷实例教程:jQuery产品图片360度旋转Circlr 引入核心文件 <script sr
-
基于jquery fly插件实现加入购物车抛物线动画效果
先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一.插件下载 插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr
-
基于jQuery Tipso插件实现消息提示框特效
基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件,分享给大家供大家参考,具体内容如下 在线演示 源码下载 实现的代码: <div class="dowebok"> <h2> 1.默认</h2> <div class="inner"> <span id="tip1" data-tipso
-
整理8个很棒的 jQuery 倒计时插件和教程
jQuery 倒计时插件和教程. jQuery Countdown spriteTimer php ajax/jquery countdown Add a Countdown Timer on Your Website jQuery Flipclock Fancy Countdown Cool jQuery Countdown Joomla jQuery Countdown
-
Javascript基于jQuery UI实现选中区域拖拽效果
一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script
-
基于Marquee.js插件实现的跑马灯效果示例
本文实例讲述了基于Marquee.js插件实现的跑马灯效果.分享给大家供大家参考,具体如下: 1.Marquee.js文件 /**************************************************************** - Marquee.js - 参数: - ID:滚动对象(必须) - Direction:滚动方向("top": 0, "up": 0, "bottom": 1, "down"
-
基于jQuery代码实现圆形菜单展开收缩效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <script src="js/jquery.min.js"></script> <script src="js/jquery.menu.js"></script> <style> body { margin:0 auto; background:none repeat scroll 0 0 #FCFCFC } .outer_c
-
基于jQuery实现多标签页切换的效果(web前端开发)
这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo
-
基于jQuery实现仿百度首页选项卡切换效果
以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&