The web page displays the server time and the javscript self running clock in real time

The most recent project page needed to display server time in real time, and if the server time was loaded through ajax every second, there would be a lot of requests.

Therefore, a combination of "javscript self-running clock" and "ajax load server time "was designed to display the server time. The "javscript self-running clock" runs automatically from an initial time, and the "ajax load server time "updates the server time to the" javscript self-running clock "every 60s.

Javscript self-running clock:

 
 

 
String.prototype.format = function() { 
var args = arguments; 
return this.replace(/{(d+)}/g, function(m, i){return args[i];}); 
}; 

 
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, 
 
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; 
}, 

 
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); 
}, 

 
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); 
}, 

 
isLeapYear : function() { 
if (this.year % 4 == 0) { 
if (this.year % 100 != 0) return true; 
if (this.year % 400 == 400) return true; 
} 
return false; 
} 

}; 

Calling code:

 
 
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); 
} 

HTML display code:

 
<span id="currTime"></span>