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 类方法定义还是有点区别
Apr 15 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
Vue组件通信实践记录(推荐)
Aug 15 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
vue下的@change事件的实现
Oct 25 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP新手上路(六)
2006/10/09 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
Python代码的打包与发布详解
2014/07/30 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Django框架安装方法图文详解
2019/11/04 Python
如何基于python操作excel并获取内容
2019/12/24 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
编写strcpy函数
2014/06/24 面试题
酒店前厅员工辞职信
2014/01/08 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
家教广告词
2014/03/19 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
医院感染管理制度
2015/08/05 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python