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学习之prop和attr的区别示例介绍
Nov 15 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
Vue.js原理分析之nextTick实现详解
Sep 07 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
星际争霸中的热键
2020/03/04 星际争霸
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
面试常见的js算法题
2017/03/23 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Python构建XML树结构的方法示例
2017/06/30 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python对XML文件的操作实现代码
2020/03/27 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
医护人员英文求职信范文
2013/11/26 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
悬空寺导游词
2015/02/05 职场文书
2015年外联部工作总结
2015/04/03 职场文书
安全责任协议书范本
2016/03/23 职场文书