這篇文章主要介紹了JavaScript實現的一個倒計時的類,本文直接給出demo代碼,需要的朋友可以參考下
近期在做排列五的彩票項目，每一期都有購彩時段，即用戶打開這個排列五的頁面時，會從服務器傳來一個remaintime（離本次彩期結束的剩余時間），然後這個時間在客戶端遞減呈現給用戶看，讓用戶獲得本次彩期的剩余時間。
實現原理挺簡單的，在此不在贅述，運行以下代碼查看demo：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 <!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>