網頁實時顯示服務器時間和javscript自運行時鐘

2019-11-20 14:34:37

字體：大中小

來源：轉載

供稿：網友

最近項目網頁需要實時顯示服務器時間，如果每秒通過ajax加載服務器時間的話，就會產生大量的請求。

于是設計了“javscript自運行時鐘” 和 "ajax加載服務器時間" 相結合的形式來顯示服務器時間?！癹avscript自運行時鐘” 以某初始時間為起點自動運行，"ajax加載服務器時間" 每60s將服務器的時間給“javscript自運行時鐘” 更新。

javscript自運行時鐘：

復制代碼代碼如下:

 
/*! 
* File: sc_clock.js 
* Version: 1.0.0 
* Author: LuLihong 
* Date: 2014-06-06 
* Desc: 自動運行的時鐘 
* 
* 版權：開源，隨便使用，請保持頭部。 
*/ 

/** 
* 格式化輸出 
* @returns 
*/ 
String.prototype.format = function() { 
var args = arguments; 
return this.replace(//{(/d+)/}/g, function(m, i){return args[i];}); 
}; 

/** 
* 轉化為數字 
* @returns 
*/ 
String.prototype.toInt = function(defaultV) { 
if (this === "" || !(/^/d+$/.test(this))) return defaultV; 
return parseInt(this); 
}; 

window.scClock = 
{ 
year : 2014, 
month : 1, 
day : 1, 
hour : 0, 
minute : 0, 
second : 0, 

isRunning : false, 
/** 
* 顯示時間的函數，調用者在調用startup函數時傳入。 
*/ 
showFunc : function(){}, 

/** 
* 初始化 
*/ 
init : function(y, mon, d, h, min, s){ 
this.year = y; 
this.month = mon; 
this.day = d; 
this.hour = h; 
this.minute = min; 
this.second = s; 
}, 

/** 
* 初始化時間：時間格式：2014-06-09 11:30:30 
*/ 
updateTime : function(time) { 
var arr = time.split(/[/-/ /:]/); 
if (arr.length != 6) return; 

this.year = arr[0].toInt(2014); 
this.month = arr[1].toInt(1); 
this.day = arr[2].toInt(1); 
this.hour = arr[3].toInt(0); 
this.minute = arr[4].toInt(0); 
this.second = arr[5].toInt(0); 
}, 

/** 
* 更新時間：時間格式：2014-06-09 11:30:30 
*/ 
updateTime : function(time) { 
var arr = time.split(/[/-/ /:]/); 
if (arr.length != 6) return; 

this.year = arr[0].toInt(2014); 
this.month = arr[1].toInt(1); 
this.day = arr[2].toInt(1); 
this.hour = arr[3].toInt(0); 
this.minute = arr[4].toInt(0); 
this.second = arr[5].toInt(0); 
}, 

/** 
* 開始 
*/ 
startup : function(func) { 
if (this.isRunning) return; 
this.isRunning = true; 
this.showFunc = func; 
window.setTimeout("scClock.addOneSec()", 1000); 
}, 

/** 
* 結束 
*/ 
shutdown : function() { 
if (!this.isRunning) return; 
this.isRunning = false; 
}, 

/** 
* 獲取時間 
*/ 
getDateTime : function() { 
var fmtString = "{0}-{1}-{2} {3}:{4}:{5}"; 
var sMonth = (this.month < 10) ? ("0" + this.month) : this.month; 
var sDay = (this.day < 10) ? ("0" + this.day) : this.day; 
var sHour = (this.hour < 10) ? ("0" + this.hour) : this.hour; 
var sMinute = (this.minute < 10) ? ("0" + this.minute) : this.minute; 
var sSecond = (this.second < 10) ? ("0" + this.second) : this.second; 
return fmtString.format(this.year, sMonth, sDay, sHour, sMinute, sSecond); 
}, 

/** 
* 增加一秒 
*/ 
addOneSec : function() { 
this.second++; 
if (this.second >= 60) { 
this.second = 0; 
this.minute++; 
} 
if (this.minute >= 60) { 
this.minute = 0; 
this.hour++; 
} 
if (this.hour >= 24) { 
this.hour = 0; 
this.day++; 
} 
switch(this.month) { 
case 1: 
case 3: 
case 5: 
case 7: 
case 8: 
case 10: 
case 12: { 
if (this.day > 31) { 
this.day = 1; 
this.month++; 
} 
break; 
} 
case 4: 
case 6: 
case 9: 
case 11: { 
if (this.day > 30) { 
this.day = 1; 
this.month++; 
} 
break; 
} 
case 2: { 
if (this.isLeapYear()) { 
if (this.day > 29) { 
this.day = 1; 
this.month++; 
} 
} else if (this.day > 28) { 
this.day = 1; 
this.month++; 
} 
break; 
} 
} 
if (this.month > 12) { 
this.month = 1; 
this.year++; 
} 

this.showFunc(this.getDateTime()); 

if (this.isRunning) 
window.setTimeout("scClock.addOneSec()", 1000); 
}, 

/** 
* 檢測是否為閏年: 判斷閏年的規則是，能被4整除，但能被100整除的不是閏年，能被400整除為閏年. 
*/ 
isLeapYear : function() { 
if (this.year % 4 == 0) { 
if (this.year % 100 != 0) return true; 
if (this.year % 400 == 400) return true; 
} 
return false; 
} 

}; 

調用代碼：

復制代碼代碼如下:

 
/** 
* 開始系統時間 
*/ 
function startupClock() { 
if (window.scClock) { 
window.scClock.startup(function(time){ 
$("#currTime").text(time); 
}); 
} 
} 
/** 
* 加載系統時間 
*/ 
function loadSystemTime() { 
var jsonData = { 
"ajaxflag": 1, 
"mod": "time_mod" 
}; 
$.getJSON(ajax_sc_url, jsonData, function(data){ 
if (data.code==0) { 
if (window.scClock) 
window.scClock.updateTime(data.time); 
} 
}); 
setTimeout("loadSystemTime()", 60000); 
} 