JavaScript实现的一个倒计时的类
近期在做排列五的彩票项目，每一期都有购彩时段，即用户打开这个排列五的页面时，会从服务器传来一个remaintime（离本次彩期结束的剩余时间），然后这个时间在客户端递减呈现给用户看，让用户获得本次彩期的剩余时间。
实现原理挺简单的，在此不在赘述，运行以下代码查看demo：
<!doctypehtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk"/>
<title>index</title>
<styletype="text/css">
em{color:#f00;}
</style>
</head>
<body>
<divid="remaintime"></div>
<scripttype="text/javascript">
varTheTime=function(){
this.init.apply(this,arguments);
};
TheTime.prototype={
init:function(obj){
varthat=this;
obj=that.buildParam(obj);
that.callback=obj.callback;
varcontainer=that.container=document.getElementById(obj.container);
container.innerHTML='<em></em>小时<em></em>分钟<em></em>秒';
varhourSpace=that.hourSpace=container.getElementsByTagName('em')[0];
varminuteSpace=that.minuteSpace=container.getElementsByTagName('em')[1];
varsecondSpace=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;
vartimer=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||newFunction
};
returnobj;
},
resetTime:function(){
varthat=this;
that.container.innerHTML="已经截止";
},
//刷新时间
renderTime:function(){
//debugger;
varthat=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();
}
varbitHandle=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){
varstr=num.toString();
if(str.length<2){
str=0+str;
}
returnstr;
},
_callback:function(){
varthat=this;
clearInterval(that.timer);
that.callback();
}
};
newTheTime({
//容器id
container:'remaintime',
//服务器返回的剩余时间，单位为秒
remaintime:10000,
//倒计时完成时的回调
callback:function(){
document.getElementById('remaintime').innerHTML='已截止';
}
});
</script>
</body>
</html>