基於js對時間動態控制顯示。

 

    最近項目中使用有個需求是按照流程掛起時間開始 進行統計，時間過去多久了 顯示格式XX天XX小時XX分XX秒，後臺已有該流程掛起時間。需要動態刷新時間，只能使用javascript對時間進行即使顯示了。

    爲了提高代碼的複用性，寫了基於面向對象的 對時間控制的類。代碼如下：

  //Time對象 function TimeCom(Value) { var newCom = new Date(value); this.year = newCom.getYear(); this.month = newCom.getMonth()+1; this.day = newCom.getDate(); this.hour = newCom.getHours(); this.minute = newCom.getMinutes(); this.second = newCom.getSeconds(); this.msecond = newCom.getMilliseconds(); this.week = newCom.getDay(); } //對日期相減，並計算得出結果，返回兩個時間的相差秒數 function DateDiff(begindate,enddate) { var TimeCom1 = new TimeCom(begindate); var TimeCom2 = new TimeCom(enddate); var result; //轉換爲標準的格林尼治時間進行計算 return Math.round((Date.UTC(TimeCom1.year,TimeCom1.month- 1,TimeCom1.day,TimeCom1.hour,TimeCom1.minute,TimeCom1.second)-Date.UTC(TimeCom2.year,TimeCom2.month- 1,TimeCom2.day,TimeCom2.hour,TimeCom2.minute,TimeCom2.second))/1000); } //通過DateDiff返回的結果計算顯示需要的數據 function TimeGet(Value) { var secondTotal=parseInt(Value) this.day=Math.round(secondTotal/(60*60*24)); secondTotal=secondTotal%(60*60*24); this.hour=Math.round(secondTotal/(60*60)); secondTotal=secondTotal%(60*60); this.minute=Math.round(secondTotal/(60)); secondTotal=secondTotal%(60); this.second=secondTotal; }

爲方便輸出顯示格式，我將顯示代碼分離在前臺頁面，代碼如下：

//listID 是顯示結果，time 流程掛起時間。 function DisplayTime(listID,Time) { var TimeNow=new Date(); var StopTime=new Date(Time); var secondTotal= DateDiff(TimeNow,StopTime); var timget=new TimeGet(secondTotal); $(listID).html("<font color='red'>"+timget.day+"天"+timget.hour+"小時"+timget.minute+"分"+timget.second+"秒</font>"); }

至此，腳本上增加setInterval( "DisplayTime(顯示控件id,掛起時間)",1000 );即可以使用了。

一個頁面多個流程要掛起，只要傳遞對應的控件id，跟獲取到對應的掛起時間就可以了。