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面向对象编程
Mar 04 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
three.js 如何制作魔方
Jul 31 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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初学者头疼十四条问题大总结
2008/11/12 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
解析Python中while true的使用
2015/10/13 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
委托公证书
2014/04/08 职场文书
献爱心标语
2014/06/21 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
食品安全演讲稿
2014/09/01 职场文书
趣味运动会广播稿
2014/09/13 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
作文评语集锦
2014/12/25 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS