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判断选择的时间是否大于今天的代码
Aug 20 Javascript
Javascript函数的参数
Jul 16 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 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中iconv函数使用方法
2008/05/24 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python远程登录代码
2008/04/29 Python
Python中__call__用法实例
2014/08/29 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Python3最长回文子串算法示例
2019/03/04 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
十佳教师事迹材料
2014/01/11 职场文书
企业内部培训方案
2014/02/04 职场文书
校园环保建议书
2014/05/14 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python