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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
第九节--绑定
2006/11/16 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
企业治理工作自我评价
2013/09/26 职场文书
平面设计师的工作职责
2013/11/21 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
保研推荐信格式
2015/03/25 职场文书
天堂的孩子观后感
2015/06/11 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
Python os和os.path模块详情
2022/04/02 Python