Real-time display of server time and javscript self-running clock on webpages

Recently, the project web page 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 "javscript self-run Clock" and "ajax loading server time" to display the server time. The "javscript self-run Clock" runs automatically starting from an initial time. The "ajax loading server time" is updated every 60 s to the "javscript self-run Clock.

Javscript self-run clock:
Copy codeThe Code is as follows:
/*!
* File: SC _clock.js
* Version: 1.0.0
* Author: LuLihong
* Date: 2014-06-06
* Desc: Automatic clock
*
* Copyright: it is open-source and can be used at will. Please keep it in the header.
*/

/**
* Format the output.
* @ Returns
*/
String. prototype. format = function (){
Var args = arguments;
Return this. replace (/\ {(\ d +) \}/g, function (m, I) {return args [I];});
};

/**
* Convert to numbers
* @ 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,
/**
* Display the time function, which is passed in when the caller calls 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: 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 );
},

/**
* Updated at: Time Format: 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 );
},

/**
* Increase by 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 );
},

/**
* Check whether it is a leap year: the rule for determining whether a leap year can be divisible by four, but 100 is not a leap year, and 400 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;
}

};

Call code:
Copy codeThe Code is as follows:
/**
* Start system time
*/
Function startupClock (){
If (window. scClock ){
Window. scClock. startup (function (time ){
$ ("# CurrTime"). text (time );
});
}
}
/**
* System loading 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:
Copy codeThe Code is as follows:
<Span id = "currTime"> </span>