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接收get传递的值的代码
Nov 30 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
element跨分页操作选择详解
Jun 29 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP时间和日期函数详解
2015/05/08 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
微信小程序自定义轮播图
2018/11/04 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
详解python单例模式与metaclass
2016/01/15 Python
Python快速排序算法实例分析
2017/11/29 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
python实现四人制扑克牌游戏
2020/04/22 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
英国健身超市:Fitness Superstore
2019/06/17 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
大学生创业策划书
2014/02/02 职场文书
进步之星获奖感言
2014/02/22 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
美容院合作经营协议书
2014/10/10 职场文书
教师个人学习总结
2015/02/11 职场文书
电话营销开场白
2015/05/29 职场文书
python神经网络ResNet50模型
2022/05/06 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技