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


Posted in Javascript onMay 13, 2016

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在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倒计时插件实现团购秒杀效果,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
详解vue v-model
Aug 31 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 #Javascript
最简单的tab切换实例代码
May 13 #Javascript
浅析创建javascript对象的方法
May 13 #Javascript
全面理解JavaScript中的闭包
May 12 #Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 #Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 #Javascript
js自定义select下拉框美化特效
May 12 #Javascript
You might like
PHP伪静态页面函数附使用方法
2008/06/20 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
js转换对象为xml
2017/02/17 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
物理系毕业生自荐信
2013/11/01 职场文书
煤矿班组长的职责
2013/12/25 职场文书
仓管员岗位责任制
2014/02/19 职场文书
检查接待方案
2014/02/27 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
环保公益策划方案
2014/08/15 职场文书
2014年终个人总结报告
2015/03/09 职场文书
违纪开除通知书
2015/04/25 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL