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

If you load the server time through ajax every second, a large number of requests will be generated, So we plan to use js to solve this requirement. Recently, the project web page needs to display the server time in real time, if the server 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:

The 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:

The 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:

The Code is as follows: