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中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
js和jquery中获取非行间样式
May 05 jQuery
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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抽象类 介绍
2012/06/13 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP实现搜索相似图片
2015/09/22 PHP
培养自己的php编码规范
2015/09/28 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
Python中的filter()函数的用法
2015/04/27 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
centos7之Python3.74安装教程
2019/08/15 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
python属于跨平台语言码
2020/06/09 Python
python中二分查找法的实现方法
2020/12/06 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
总经理职责
2013/12/22 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers