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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
基于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 常见郁闷问题答解
2006/11/25 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python逆序打印各位数字的方法
2018/06/25 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Django中的session用法详解
2020/03/09 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
办理房产证委托书
2014/09/18 职场文书
员工离职证明范本
2015/06/12 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle