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 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
使用layui的router来进行传参的实现方法
Sep 06 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python简单进程锁代码实例
2015/04/27 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python 排序算法总结及实例详解
2016/09/28 Python
SVM基本概念及Python实现代码
2017/12/27 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python实现Event回调机制的方法
2019/02/13 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
Django框架表单操作实例分析
2019/11/04 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
小学安全教育材料
2014/02/17 职场文书
抄作业检讨书
2014/02/17 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书