La page Web affiche l'heure du serveur et l'horloge automatique Javascript en temps réel_compétences Javascript

Récemment, la page Web du projet doit afficher l'heure du serveur en temps réel. Si l'heure du serveur est chargée via ajax chaque seconde, un grand nombre de requêtes seront générées.

Nous avons donc conçu une combinaison de « horloge automatique javascript » et de « heure de chargement du serveur ajax » pour afficher l'heure du serveur. L'« horloge auto-exécutable javascript » s'exécute automatiquement à partir d'une certaine heure initiale comme point de départ, et « l'heure du serveur de chargement ajax » met à jour l'heure du serveur sur « l'horloge auto-exécutable javascript » toutes les 60 secondes.

horloge automatique javascript :

Copier le code Le code est le suivant :

/ *!
* Fichier : sc_clock.js
* Version : 1.0.0
* Auteur : LuLihong
* Date : 06/06/2014
* Desc : Exécution automatique horloge
*
* Copyright : Open source, utilisez-le comme vous le souhaitez, veuillez garder la tête baissée.
*/

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

/**
* Convertir en nombre
* @returns
*/
String.prototype.toInt = function(defaultV) {
if (this === "" || !(/^d $/.test(this))) return defaultV
return parseInt(this)} ;

window.scClock =
{
année : 2014,
mois : 1,
jour : 1,
heure : 0,
minute : 0,
seconde : 0,

isRunning : false,
/**
* Une fonction qui affiche l'heure, transmise par l'appelant lors de l'appel de la fonction de démarrage.
*/
showFunc : function(){},

/**
* Initialisation
*/
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;

/**
* Heure d'initialisation : Format de l'heure : 09/06/2014 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); 3].toInt(0);
this.minute = arr[4].toInt(0);
this.second = arr[5].toInt(0);
/**
* Heure de mise à jour : Format de l'heure : 09/06/2014 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); .toInt(1);
this.hour = arr[3].toInt(0);
this.minute = arr[4].toInt(0); 5].toInt(0);
},

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

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

/**
* Fin
*/
getDateTime : function() {
var fmtString = "{0}-{1}-{2} {3}:{4}:{5}"
var sMonth = (this .month < 10) ? ("0" ce.mois) : ce.mois
var sDay = (ce.jour < 10) ("0" ce.jour) : ce.jour; >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);
},

/**
* Obtenez du temps
*/
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 ; ) {
cas 1 :
cas 3 :
cas 5 :
cas 7 :
cas 8 :
cas 10 :
cas 12 : {
si ( ce.jour > 31) {
ce.jour = 1;
ce.mois ;
}
pause; 🎜>cas 9 :
cas 11 : {
if (ce.jour > 30) {
ce.jour = 1;
ce.mois
}
pause ;
}
cas 2 : {
if (this.isLeapYear()) {
if (this.day > 29) {
this.day = 1
this; mois ;
}
} else if (ce.jour > 28) {
ce.jour = 1;
ce.mois
}
pause;
}
if (ce.mois > 12) {
ce.mois = 1;
cette.année
}

this.showFunc(this.getDateTime) ());

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

/***/
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顯示代碼：

複製程式碼 程式碼如下: