웹 페이지는 실시간_javascript 기술로 서버 시간과 javscript 자체 실행 시계를 표시합니다.

최근에는 프로젝트 웹 페이지에서 서버 시간을 실시간으로 표시해야 하는데, Ajax를 통해 서버 시간이 1초마다 로드되면 많은 요청이 발생하게 됩니다.

그래서 우리는 "javascript self-running clock"과 "ajax 로딩 서버 시간"을 조합하여 서버 시간을 표시하도록 설계했습니다. "javscript 자체 실행 시계"는 특정 초기 시간을 시작점으로 자동 실행되며 "ajax 로드 서버 시간"은 60초마다 서버 시간을 "javscript 자체 실행 시계"로 업데이트합니다.

javscript 자체 실행 시계:

코드 복사 코드는 다음과 같습니다.

/ *!
* 파일: sc_clock.js
* 버전: 1.0.0
* 작성자: LuLihong
* 날짜: 2014-06-06
* 설명: 자동 실행 시계
*
* 저작권: 오픈소스이니 마음대로 사용하세요.
*/

/**
* 형식화된 출력
* @returns
*/
String.prototype.format = function() {
var args = 인수
return this.replace(/{ (d )}/g, function(m, i){return args[i];})

/**
* 숫자로 변환
* @returns
*/
String.prototype.toInt = function(defaultV) {
if (this === "" || !(/^d $/.test(this)) return defaultV
return parsInt(this)
};

window.scClock =
{
년 : 2014,
월 : 1,
일 : 1,
시 : 0,
분 : 0,
초 : 0,

isRunning : false,
/**
* 시작 함수를 호출할 때 호출자가 전달한 시간을 표시하는 함수입니다.
*/
showFunc : function(){},

/**
* 초기화
*/
init : function(y, mon, d, h, min, s){
this.year = y
this.month =
this.day = d; 🎜>this.hour = h;
this.분 = min;
this.second = s
},

/**
* 초기화 시간 : 시간형식 : 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.분 = arr[4].toInt(0);
this.second = arr[5].toInt(0);

/**
* 업데이트 시간 : 시간형식 : 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)
},

/**
* 시작
*/
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)
var sHour = (this.hour < 10) ? ("0" this.hour) : this.hour;
var sMinute = (this.분 < 10) ? ("0" this.분) this. Minute;
var sSecond = (this.second < 10) ? ("0" this.second) : this.second
return fmtString.format(this.year, sMonth, sDay, sHour, sMinute, sSecond)
},

/**
* 1초 추가
*/
addOneSec : function() {
this.second
if (this.second > = 60) {
this.second = 0;
this.분
}
if (this.분 >= 60) {
this.분 = 0; this.hour ;
}
if (this.hour >= 24) {
this.hour = 0
this.day ; ) {
사례 1:
사례 3:
사례 5:
사례 7:
사례 8:
사례 10:
사례 12: {
if ( this.day > 31) {
this.day = 1;
this.month
}
break
}
사례 4:
사례 6:
케이스 9:
케이스 11: {
if (this.day > 30) {
this.day = 1
this.month ;
}
사례 2: {
if (this.isLeapYear()) {
if (this.day > 29) {
this.day = 1; 월 ;
}
} else if (this.day > 28) {
this.day = 1; this.month ;
}
if (this.month > 12) {
this.month = 1;
this.year
}

this.showFunc(this.getDateTime ());

if (this.isRunning)
window.setTimeout("scClock.addOneSec()", 1000)
},

/**
* 윤년 여부 감지: 윤년 여부를 판단하는 규칙은 4로 나누어 떨어지지만, 100으로 나누어지면 윤년이 아닙니다. 윤년이다.
*/
isLeapYear : function() {
if (this.year % 4 == 0) {
if (this.year % 100 != 0) return true
if (this; .year % 400 == 400) true를 반환합니다.
}
false를 반환합니다.
}

;
Call code:

Copy code The code is as follows:

/**
* Start system time
*/
function startupClock() {
if (window.scClock) {
window.scClock.startup(function(time){
$("#currTime").text(time);
});
}
}
/**
* Loading 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 The code is as follows: