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实现动态CSS换肤技术的脚本
Jun 29 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
解决Vue项目中tff报错的问题
Oct 21 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中的流(streams)浅析
2015/07/02 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python数据结构之单链表详解
2017/09/12 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
关于python多重赋值的小问题
2019/04/17 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Python模块相关知识点小结
2020/03/09 Python
python else语句在循环中的运用详解
2020/07/06 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
小学国庆节活动方案
2014/02/11 职场文书
西安兵马俑导游词
2015/02/02 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android