jquery 倒计时效果实现秒杀思路


Posted in Javascript onSeptember 11, 2013
<script type="text/javascript"> 
$(function(){ 
countDown("2015/9/8 11:11:59","#colockbox1"); 
}); 
function countDown(time,id){ 
var day_elem = $(id).find('.day'); 
var hour_elem = $(id).find('.hour'); 
var minute_elem = $(id).find('.minute'); 
var second_elem = $(id).find('.second'); //if(typeof end_time == "string") 
var end_time = new Date(time).getTime(),//月份是实际月份-1 
sys_second = (end_time-new Date().getTime())/1000; 
var timer = setInterval(function(){ 
if (sys_second > 1) { 
sys_second -= 1; 
var day = Math.floor((sys_second / 3600) / 24); 
var hour = Math.floor((sys_second / 3600) % 24); 
var minute = Math.floor((sys_second / 60) % 60); 
var second = Math.floor(sys_second % 60); 
day_elem && $(day_elem).text(day);//计算天 
$(hour_elem).text(hour<10?"0"+hour:hour);//计算小时 
$(minute_elem).text(minute<10?"0"+minute:minute);//计算分钟 
$(second_elem).text(second<10?"0"+second:second);//计算秒杀 
} else { 
clearInterval(timer); 
} 
}, 1000); 
} 
</script>

html:
<div class="colockbox" id="colockbox1"> 
<span class="day">00</span> 
<span class="hour">00</span> 
<span class="minute">00</span> 
<span class="second">00</span> 
</div>

公司做了个秒杀页面,需要做一个倒计时效果,特此收藏

代码演示下载:https://3water.com/jiaoben/103648.html

Javascript 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
JS非行间样式获取函数的实例代码
Jun 05 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 #Javascript
extjs render 用法介绍
Sep 11 #Javascript
jQuery图片轮播的具体实现
Sep 11 #Javascript
Javascript倒计时页面跳转实例小结
Sep 11 #Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 #Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 #Javascript
jquery获取子节点和父节点的示例代码
Sep 10 #Javascript
You might like
PHP中的extract的作用分析
2008/04/09 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python re模块介绍
2014/11/30 Python
Python制作爬虫采集小说
2015/10/25 Python
python实现贪吃蛇游戏
2020/03/21 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
性能测试工程师的面试题
2015/02/20 面试题
工业设计专业自荐书
2014/06/05 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
农业生产宣传标语
2014/10/08 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
解决Oracle数据库用户密码过期
2022/05/11 Oracle