一个关于倒计时的类

近期在做排列五的彩票项目，每一期都有购彩时段，即用户打开这个排列五的页面时，会从服务器传来一个remaintime（离本次彩期结束的剩余时间），然后这个时间在客户端递减呈现给用户看，让用户获得本次彩期的剩余时间。

实现原理挺简单的，在此不在赘述，运行以下代码查看demo：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>index</title>
<style type="text/css">
em{color:#f00;}
</style>
</head>

<body>
<div id="remaintime"></div>
<script type="text/javascript">

var TheTime = function(){
	this.init.apply(this,arguments);
};

TheTime.prototype = {
	init: function(obj){
		var that = this;
		obj = that.buildParam(obj);
		that.callback = obj.callback;
		var container = that.container = document.getElementById(obj.container);
		container.innerHTML = '<em></em>小时<em></em>分钟<em></em>秒';
		var hourSpace = that.hourSpace = container.getElementsByTagName('em')[0];
		var minuteSpace = that.minuteSpace = container.getElementsByTagName('em')[1];
		var secondSpace = that.secondSpace = container.getElementsByTagName('em')[2];
		if(obj.remaintime==0){
			that.resetTime();
			return;
		}

		that.hours = Math.floor(obj.remaintime/3600);
		that._remainder1 = obj.remaintime % 3600;
		that.minutes = Math.floor(that._remainder1/60);
		that.seconds = that._remainder1 % 60;
		var timer = that.timer = setInterval(function(){
			that.renderTime.apply(that);
		},1000);
	},
	buildParam: function(obj){
		obj = {
			//container为dom节点的id
			container: obj.container || 'container',
			remaintime: Number(obj.remaintime) || 0,
			//倒计时完成后的回调
			callback: obj.callback || new Function
		};
		return obj;
	},
	resetTime: function(){
		var that = this;
		that.container.innerHTML = "已经截止";
	},
	//刷新时间
	renderTime: function(){
		//debugger;
		var that = this;
		if(that.seconds>0){
			that.seconds--;
		}else{
			that.seconds = 59;
			if(that.minutes>0){
				that.minutes--;
			}else{
				that.minutes = 59;
				if(that.hours>0){
					that.hours--;
				}
			}
		}
		
		//时刻监听
		if(that.hours==0 && that.minutes==0 && that.seconds==0){
			//执行回调
			that._callback();
		}
		var bitHandle = that.bitHandle;

		var _hour = bitHandle(that.hours);
		var _minute = bitHandle(that.minutes);
		var _second = bitHandle(that.seconds);
		that.hourSpace.innerHTML = _hour;
		that.minuteSpace.innerHTML = _minute;
		that.secondSpace.innerHTML = _second;
	},
	//对于位数的处理，确保返回两位数
	bitHandle: function(num){
		var str = num.toString();
		if(str.length<2){
			str = 0 + str;
		}
		return str;
	},
	_callback: function(){
		var that = this;
		clearInterval(that.timer);
		that.callback();
	}

};

new TheTime({
	//容器id
	container: 'remaintime',
	//服务器返回的剩余时间，单位为秒
	remaintime: 10000,
	//倒计时完成时的回调
	callback: function(){
		document.getElementById('remaintime').innerHTML = '已截止';
	}
});
</script>
</body>
</html>

posted on 2011-02-20 15:27 zhenn 阅读(435) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

关于我

振之博文

一个关于倒计时的类

公告

导航