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高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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实现的支持断点续传的文件下载类
2014/09/23 PHP
心扬JS分页函数代码
2010/09/10 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
新闻专业个人求职信
2013/12/19 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
2014组织生活会方案
2014/05/19 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
三孔导游词
2015/02/05 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers