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 相关文章推荐
js 页面元素的几个用法总结
Nov 18 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
js实现继承的5种方式
Dec 01 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
详解ES6中的let命令
Apr 05 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 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 验证码的实现代码
2011/07/17 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
php递归json类实例
2014/12/02 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
js实现数字滚动特效
2019/12/16 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python程序设计入门(3)数组的使用
2014/06/16 Python
python实现查询IP地址所在地
2015/03/29 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
实习期自我鉴定
2013/10/11 职场文书
住房公积金接收函
2014/01/09 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
幼教简历自我评价
2014/01/28 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
产品质量保证书
2014/04/29 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python