近期在做排列五的彩票项目，每一期都有购彩时段，即用户打开这个排列五的页面时，会从服务器传来一个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></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>
您可能感兴趣的文章: