The most recent project page needs to display the server time in real time, and if the server time is loaded by Ajax every second, a lot of requests will be generated.
A combination of "Javscript" and "Ajax Load Server Time" was designed to display server time. The Javscript clock runs automatically starting at an initial time, and "Ajax Load server Time" updates the server's time to the "Javscript clock" every 60s.
Javscript self-running clock:
Copy Code code as follows:
/*!
* File:sc_clock.js
* version:1.0.0
* Author:lulihong
* date:2014-06-06
* Desc: Automatically run the clock
*
* Copyright: Open source, casual use, please keep the head.
*/
/**
* Formatted output
* @returns
*/
String.prototype.format = function () {
var args = arguments;
Return This.replace (/\{(\d+) \}/g, function (M, i) {return args[i];});
};
/**
* Convert to Digital
* @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 that the caller passed in 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);
},
/**
* Detection is a leap year: the rule to judge a leap year is to be divisible by 4, but not a leap year that can be divisible by 100, divisible by 400 as a leap year.
*/
Isleapyear:function () {
if (this.year% 4 = 0) {
if (this.year%!= 0) return true;
if (this.year% = =) return true;
}
return false;
}
};
Calling code:
Copy Code code as follows:
/**
* Start System time
*/
function Startupclock () {
if (Window.scclock) {
Window.scClock.startup (function (time) {
$ ("#currTime"). Text (time);
});
}
}
/**
* Load System 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 Code code as follows:
<span id= "Currtime" ></span>
