javascript倒计时功能实现代码


Posted in Javascript onJune 07, 2012

代码如下:

/** 
* 倒计时 
* 
* @author WadeYu 
* @date 2012-04-20 17:40 
* @copyright boyaa.com 
*/ 
var TimeCountDown = function( initTime ){ 
var day = 0; 
var hour = 0; 
var minute = 0; 
var second = 0; 
var timerId = 0; 
var self = this; 
var fixInitTime = function(){ 
initTime = parseInt(initTime); 
if ( isNaN(initTime) || initTime < 0 ){ 
initTime = 0; 
} 
}; 
var fixZero = function(num){ 
return num < 10 ? ('0'+num) : num; 
}; 
var calc = function(){ 
showCallback.call(self, [fixZero(day), fixZero(hour), fixZero(minute), fixZero(second)]); 
if ( day === 0 && hour === 0 && minute === 0 && second === 0){ 
self.stop(); 
} else { 
if (hour === 0 && day > 0){ 
hour = 24; 
day--; 
} 
if (minute === 0 && hour > 0){ 
minute = 60; 
hour--; 
} 
if (second === 0 && minute > 0){ 
second = 59; 
minute--; 
} else { 
second--; 
} 
timerId = window.setTimeout(function(){ 
calc(); 
}, 1000); 
} 
}; 
var showCallback = function(){ 
alert('Please set show callback functions!'); 
}; 
var init = function(){ 
fixInitTime(); 
if ( initTime > 0 ){ 
day = Math.floor( (initTime / (24*60*60)) ); 
initTime -= day * 24*60*60; 
hour = Math.floor( initTime / (60*60) ); 
initTime -= hour * 60*60; 
minute = Math.floor( initTime / 60 ); 
second = initTime - minute * 60; 
} 
}; 
this.start = function(){ 
calc(); 
}; 
this.stop = function(){ 
timerId && window.clearTimeout(timerId); 
}; 
this.setShowCallback = function(fn){ 
typeof(fn) === 'function' ? (showCallback = fn) : ''; 
}; 
init(); 
};

示例如下:
<body> 
<div id="timeCon"></div> 
<script type="text/javascript"> 
var timeCountDown = new TimeCountDown(3 * 24 * 60 * 60); 
timeCountDown.setShowCallback(function( obj ){ // [天, 小时, 分, 秒] 
document.getElementById('timeCon').innerHTML = obj[0] + ":" + obj[1] + ":" + obj[2] + ':' + obj[3]; 
}); 
timeCountDown.start(); 
</script> 
</body>
Javascript 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
详解node HTTP请求客户端 - Request
May 05 Javascript
BootStrap的两种模态框方式
May 10 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 #Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 #Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 #Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 #Javascript
javascript中获取下个月一号,是星期几
Jun 01 #Javascript
一行代码告别document.getElementById
Jun 01 #Javascript
javascript的console.log()用法小结
May 31 #Javascript
You might like
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
在python中画正态分布图像的实例
2019/07/08 Python
Django REST framework 视图和路由详解
2019/07/19 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python 存取npy格式数据实例
2020/07/01 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
埃及王子观后感
2015/06/16 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
村官2015年度工作总结
2015/10/14 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
Python日志模块logging用法
2022/06/05 Python