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类后台管理菜单类-MenuSwitch
Sep 12 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
简单实现python聊天程序
2018/04/01 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python日期相关操作实例小结
2019/06/24 Python
Python中遍历列表的方法总结
2019/06/27 Python
python顺序执行多个py文件的方法
2019/06/29 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python文字转语音实现过程解析
2019/11/12 Python
python实现画循环圆
2019/11/23 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
应付会计岗位职责
2013/12/12 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
月考总结与反思
2015/10/22 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
阿里云日志过滤器配置日志服务
2022/04/09 Servers