Web page displays server time and javscript self-running clock in real time_javascript skills

Recently, the project webpage needs to display the server time in real time. If the server time is loaded through ajax every second, a large number of requests will be generated.

So we designed a combination of "javascript self-running clock" and "ajax loading server time" to display the server time. The "javscript self-running clock" automatically runs from a certain initial time as the starting point, and the "ajax load server time" updates the server time to the "javscript self-running clock" every 60 seconds.

javscript self-running clock:

Copy code The code is as follows:

/ *!
* File: sc_clock.js
* Version: 1.0.0
* Author: LuLihong
* Date: 2014-06-06
* Desc: Automatically running clock
*
* Copyright: Open source, use it as you like, please keep your head down.
*/

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

/**
* Convert to number
* @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,
/**
* A function that displays the time, passed in by the caller when calling the startup function.
*/
showFunc : function(){},

/**
* Initialization
*/
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;
},

/**
* Initialization time: Time format: 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);
},

/**
* Update time: Time format: 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);
},

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

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

/**
* Get time
*/
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);
},

/**
* Add one second
*/
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);
},

/**
* Detect whether it is a leap year: The rule for judging whether a leap year is that it is divisible by 4, but if it is divisible by 100, it is not a leap year. If it is divisible by 400, it is a leap year.
*/
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);
}

html顯示代碼：

複製程式碼 程式碼如下: