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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 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
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
DOM 基本方法
2009/07/18 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
python爬取网页转换为PDF文件
2018/06/07 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python实现简单名片管理系统
2018/11/30 Python
python实现定时发送qq消息
2019/01/18 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
少先队入队活动方案
2014/02/08 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
经理任命书模板
2014/06/06 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
公司租车协议书
2015/01/29 职场文书
创建文明城市倡议书
2015/04/28 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
安全生产培训心得体会
2016/01/18 职场文书
python析构函数用法及注意事项
2021/06/22 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
java基础——多线程
2021/07/03 Java/Android