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 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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简单的会话类代码
2011/08/08 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python解析含有重复key的json方法
2019/01/22 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
计划生育目标责任书
2015/05/09 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
python3 字符串str和bytes相互转换
2022/03/23 Python