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>