Php et javascript : afficher une horloge basée sur l'heure du serveur

Soyez le premier à donner votre avis sur cette source.

Vue 34 671 fois - Téléchargée 1 731 fois

Description

//----------------------------------------------------------------------------------------------------------
//- méthode permettant de gérer un cadran (heure + date) -
//- @param id_cadran l'id du cadran -
//- time le temps du serveur -
//- appel le numéro d'appel (hasChildNodes() renvoie true sous FF et false sous IE ...) -
//- @return rien -
//----------------------------------------------------------------------------------------------------------
function horloge(id_cadran, time, appel)
{
}

Source / Exemple :


//----------------------------------------------------------------------------------------------------------
//- méthode permettant de gérer un cadran (heure + date)                                                   -
//- @param	id_cadran l'id du cadran                                                                   -
//-		time le temps du serveur                                                                   -
//-		appel le numéro d'appel (hasChildNodes() renvoie true sous FF et false sous IE ...)        -
//- @return rien                                                                                           -
//----------------------------------------------------------------------------------------------------------
function horloge(id_cadran, time, appel)
{
	// conversion en entier des variables time et appel; au premier appel ce sont des chaînes
	time = parseInt(time);
	appel = parseInt(appel);

	// on en fait une date
    	var d = new Date(time * 1000);

	// on récupère les différentes composantes
	var heure = d.getHours();
	var min = d.getMinutes();
	var sec = d.getSeconds();

	// gestion des 0 pour qu'il y ait toujours un chiffre de la forme xx
	if (heure < 10)
	{
		heure = "0" + heure;
	}
	if (min < 10)
	{
		min = "0" + min;
	}
	if (sec < 10)
	{
		sec="0"+sec;
	}

	// le jour (libellé)
	var day;

	switch (d.getDay())
	{
		case 1: day = "lundi";
		break;

		case 2: day = "mardi";
		break;

		case 3: day = "mercredi";
		break;

		case 4: day = "jeudi";
		break;

		case 5: day = "vendredi";
		break;

		case 6: day = "samedi";
		break;

		case 0: day = "dimanche";
		break;

		default: day = "erreur : " + d.getDay();
	}

	// le mois
	var mois;

	switch (d.getMonth())
	{
		case 0: mois = "janvier";
		break;

		case 1: mois = "février";
		break;

		case 2: mois = "mars";
		break;

		case 3: mois = "avril";
		break;

		case 4: mois = "mai";
		break;

		case 5: mois = "juin";
		break;

		case 6: mois = "juillet";
		break;

		case 7: mois = "août";
		break;

		case 8: mois = "septembre";
		break;

		case 9: mois = "octobre";
		break;

		case 10: mois = "novembre";
		break;

		case 11: mois = "décembre";
		break;

		default: mois = "erreur : " + d.getMonth();
	}

	var annee = d.getFullYear(); // l'année xxxx
	var jour = d.getDate(); // le jour (chiffre)

	// si elle n'existe pas on la crée
	if (appel == 1)
	{
		fieldset = document.createElement("fieldset");
		legend = document.createElement("legend");
		hr = document.createElement("hr");
		br = document.createElement("br");
		divCadran = document.createElement("div");
		texteLegend = document.createTextNode("Horloge");
		texteDate = document.createTextNode(day + " " + jour + " " + mois + " " + annee);
		texteHeure = document.createTextNode(heure + " h " + min + " min " + sec + " sec");

		divCadran.id = "divCadran";

		// mise en forme du DOM
		divCadran.appendChild(texteDate);
		divCadran.appendChild(br);
		divCadran.appendChild(texteHeure);
		legend.appendChild(texteLegend);
		fieldset.appendChild(legend);
		fieldset.appendChild(hr);
		fieldset.appendChild(divCadran);

		document.getElementById(id_cadran).appendChild(fieldset);
	}
	else // sinon on met à jour la date et l'heure
	{
		document.getElementById("divCadran").childNodes.item(0).nodeValue = day + " " + jour + " " + mois + " " + annee;
		document.getElementById("divCadran").childNodes.item(2).nodeValue = heure + " h " + min + " min " + sec + " sec";
	}

	// temps unix + 1
	time = time + 1;

	// incrémentation de appel
	appel = appel + 1;

	// on rappelle la fonction aprés une seconde
	setTimeout("horloge('" + id_cadran + "', '" + time + "', '" + appel + "')",1000);
}

Conclusion :


Fonctionnement trés simple :
- charger la fonction avec la page: <body onload=\"javascript: horloge('cadran', '".time()."', '1');\">
- ajouter une div (ou boite en général) dans laquelle mettre l'heure: <div id=\"cadran\" class=\"cadran\"></div>

Et voilà, ceux qui consultent votre site ont maintenant l'heure du serveur en temps réel et non l'heure du client !!

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
mardi 8 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2011

Salem Alaykom

voici un code plus simple :
<html><head>
<script language="javascript">
function rafraichir()
{
var date = new Date();
var text = date.toLocaleString();
document.getElementById('affichage_date').innerHTML = text;
}
document.write('');
setInterval('rafraichir()',1000);
</script>
</head>

</html>
Messages postés
6
Date d'inscription
mercredi 16 mars 2005
Statut
Membre
Dernière intervention
23 août 2006

Salut Lefter,

C'est vrai ... tu as raison ... c'est que moi dans ma tête j'avais tout le fichier alors je n'ai pas précisé ... bien sur que j'ai un echo mais il est beaucoup plus haut ...
Pour info je tiens à te préciser que mine de rien ça coûte en ressource d'ouvrir et fermer des balises pour l'interprêteur PHP donc dans mon code j'ai <?php au début et ?> à la fin ...

Merci pour ton commentaire.

@+
Messages postés
63
Date d'inscription
lundi 7 juin 2004
Statut
Membre
Dernière intervention
16 mai 2009

Pour moi, il y a aucune fonction même dans le code ci-dessous :



Pour moi c'est plus tôt de ce genre là :

."'); ?">
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
23
Hello,

quel est le pb avec IE ? Moi j'arrive à créer des éléments et des attributs sous IE.
Quand au innerHTML, tu peux prendre
document.getElementById('element_id').firstChild.nodeValue = valeur
Messages postés
6
Date d'inscription
mercredi 16 mars 2005
Statut
Membre
Dernière intervention
23 août 2006

Salut !
En fait c'est que je l'utilise pour mon serveur Apache et c'est du PHP (du moins la fonction time()).

PS: la nouvelle version ne fonctionne plus sous IE car en fait le pauvre ne comprend pas grand chose en terme de normes ... ;) lol
Si on veut que ça fonctionne sous IE ... il faut remettre:
var texteDate = day + " " + jour + " " + mois + " " + annee;
var texteHeure = heure+" h "+min+" min "+sec + " sec";
document.getElementById(id_cadran).innerHTML = "<fieldset><legend>Horloge</legend><hr/>" + texteDate + "
" + texteHeure + "</fieldset>"

à la place de :
// on met à jour le cadre
fieldset = document.createElement("fieldset");
legend = document.createElement("legend");
hr = document.createElement("hr");
br = document.createElement("br");
texteLegend = document.createTextNode("Horloge");
texteDate = document.createTextNode(day + " " + jour + " " + mois + " " + annee);
texteHeure = document.createTextNode(heure+" h "+min+" min "+sec + " sec");

// mise en forme du DOM
legend.appendChild(texteLegend);
fieldset.appendChild(legend);
fieldset.appendChild(hr);
fieldset.appendChild(texteDate);
fieldset.appendChild(br);
fieldset.appendChild(texteHeure);

// s'il y a déjà un contenu on le remplace
document.getElementById(id_cadran).replaceChild(fieldset, document.getElementById(id_cadran).firstChild);
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.