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倒计时代码
Aug 12 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
微信小程序支付及退款流程详解
Nov 30 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
js 数据类型判断的方法
Dec 03 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
微信小程序开发探究
2016/12/27 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python如何生成网页验证码
2018/07/28 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python API自动化框架总结
2019/11/12 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python对一个数向上取整的实例方法
2020/06/18 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
八年级音乐教学反思
2014/01/09 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
医学生求职自荐书
2014/06/12 职场文书
电子专业自荐信
2014/07/01 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书