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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
MySQL授权问题总结
2007/05/06 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
python3.3实现乘法表示例
2014/02/07 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python变量赋值的秘密分享
2018/04/03 Python
Python格式化输出%s和%d
2018/05/07 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Django实现发送邮件功能
2019/07/18 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
做一个有道德的人演讲稿
2014/05/14 职场文书
企业挂职心得体会
2014/09/10 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2014年政工师工作总结
2014/12/18 职场文书
团干部培训班心得体会
2016/01/06 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers