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替换已有元素replaceChild()使用介绍
Apr 03 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
react-router实现按需加载
May 09 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
python原始套接字编程示例分享
2014/02/21 Python
python中assert用法实例分析
2015/04/30 Python
python开发之文件操作用法实例
2015/11/13 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python利用微信公众号实现报警功能
2018/06/10 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python实现图像外边界跟踪操作
2020/07/13 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书