Hologe en temps réel
Contenu du snippet
C'est une petrite horloge en temps réel avec l'affichage de la date au format texte, elle est vraiment(easy).
<html><!-- par HippyZ -- Petite horloge en temps réel qui affiche la date en texte et l'heure tout simplement -->
<head>
<title>Horloge</title>
<script language="JavaScript">
function afficheDate()// Notre fonction pour afficher la date et l'heure
{
// Création de nos tableaux pour y mettre en format texte le jour et le mois.
// Pour les jours la valeur 0 équivaut à dimanche et va jusqu'à 6 = Samedi.
// Pour les mois ça va de 0 à 11 .
// En bref ça fonctionne comme touts les tableaux.
jour = new Array ("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
mois = new Array ("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
date=new Date();// Ici on affecte à notre variable l'objet "Date", qui va nous donner toutes les infos nécessaires à notre fonction.
datejour=date.getDate();// Nous allons chercher la date du jour dans notre objet date grâce à l'instruction "getDate()".
heure=date.getHours();
// Nous allons chercher l'heure dans notre objet date grâce à l'instruction "getHours() ".
minute=date.getMinutes();
// Nous allons chercher les minutes dans notre objet date grâce à l'instruction "getMinutes()".
seconde=date.getSeconds();
// Nous allons chercher les secondes dans notre objet date grâce à l'instruction "getSeconds()".
// Ici ces conditions ne servent que d'un point de vue esthétique.
// En effet, c'est bien mieux d'avoir '10 h 01' que '10 h 1'.
if (date.getDate()<10) datejour="0"+datejour;
// Si la date du jour est inférieur à 10 on va concaténer un 0 devant la date du jour.
if (heure<10) heure="0"+heure;// Et ainsi de suite pour toutes nos variables.
if (minute<10) minute="0"+minute;
if (seconde<10) seconde="0"+seconde;
// Ici on va atteindre notre élément qui affiche nos infos grâce" à son "ID" et on lui affecte tout ce qu'on veut afficher.
// Pour l'affichage on va chercher dans nos tableaux jour et mois directement avec l'index (la valeur) que
// nous retourne la fonction "getDay() et getMonth()", puis on affiche toutes les autres variables simplement.
document.getElementById("texteDate").innerHTML=jour[date.getDay()]+" "+datejour+" "+mois[date.getMonth()]+"</br></br>"+heure+":"+minute+":"+seconde;
setTimeout("afficheDate()", 1000);// Ici on rappel notre fonction toutes les 1000 ms, soit toutes les secondes.
// Sinon on ne pourrait pas afficher l'heure en temps réel.
}
</script>
</head>
<body onLoad="afficheDate()"><!-- Appel de notre fonction au démarrage -->
<p align="center"><span id ="texteDate"></span><p><!-- Ici notre "ID" -->
</body>
</html>
Conclusion :
<html><!-- par HippyZ -- Petite horloge en temps réel qui affiche la date en texte et l'heure tout simplement -->
<head>
<title>Horloge</title>
<script language="JavaScript">
function afficheDate()// Notre fonction pour afficher la date et l'heure
{
// Création de nos tableaux pour y mettre en format texte le jour et le mois.
// Pour les jours la valeur 0 équivaut à dimanche et va jusqu'à 6 = Samedi.
// Pour les mois ça va de 0 à 11 .
// En bref ça fonctionne comme touts les tableaux.
jour = new Array ("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
mois = new Array ("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
date=new Date();// Ici on affecte à notre variable l'objet "Date", qui va nous donner toutes les infos nécessaires à notre fonction.
datejour=date.getDate();// Nous allons chercher la date du jour dans notre objet date grâce à l'instruction "getDate()".
heure=date.getHours();
// Nous allons chercher l'heure dans notre objet date grâce à l'instruction "getHours() ".
minute=date.getMinutes();
// Nous allons chercher les minutes dans notre objet date grâce à l'instruction "getMinutes()".
seconde=date.getSeconds();
// Nous allons chercher les secondes dans notre objet date grâce à l'instruction "getSeconds()".
// Ici ces conditions ne servent que d'un point de vue esthétique.
// En effet, c'est bien mieux d'avoir '10 h 01' que '10 h 1'.
if (date.getDate()<10) datejour="0"+datejour;
// Si la date du jour est inférieur à 10 on va concaténer un 0 devant la date du jour.
if (heure<10) heure="0"+heure;// Et ainsi de suite pour toutes nos variables.
if (minute<10) minute="0"+minute;
if (seconde<10) seconde="0"+seconde;
// Ici on va atteindre notre élément qui affiche nos infos grâce" à son "ID" et on lui affecte tout ce qu'on veut afficher.
// Pour l'affichage on va chercher dans nos tableaux jour et mois directement avec l'index (la valeur) que
// nous retourne la fonction "getDay() et getMonth()", puis on affiche toutes les autres variables simplement.
document.getElementById("texteDate").innerHTML=jour[date.getDay()]+" "+datejour+" "+mois[date.getMonth()]+"</br></br>"+heure+":"+minute+":"+seconde;
setTimeout("afficheDate()", 1000);// Ici on rappel notre fonction toutes les 1000 ms, soit toutes les secondes.
// Sinon on ne pourrait pas afficher l'heure en temps réel.
}
</script>
</head>
<body onLoad="afficheDate()"><!-- Appel de notre fonction au démarrage -->
<p align="center"><span id ="texteDate"></span><p><!-- Ici notre "ID" -->
</body>
</html>
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.