基于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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
jQuery实现验证码功能
Mar 17 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
React中的render何时执行过程
Apr 13 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
js定时器实例分享
2016/12/20 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
js实现简单的秒表
2020/01/16 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
python实现多线程采集的2个代码例子
2014/07/07 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
利用python实现周期财务统计可视化
2019/08/25 Python
pandas数据处理进阶详解
2019/10/11 Python
python selenium循环登陆网站的实现
2019/11/04 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
成绩报告单家长评语
2014/12/30 职场文书
python如何获取网络数据
2021/04/11 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server