近期在做排列五的彩票項目，每一期都有購彩時段，即用戶打開這個排列五的頁面時，會從服務器傳來一個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>新聞熱點
疑難解答
