Hologe en temps réel

Soyez le premier à donner votre avis sur cette source.

Snippet vu 14 785 fois - Téléchargée 28 fois

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).

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>

A voir également

Ajouter un commentaire

Commentaires

cs_Baptiste852
Messages postés
2
Date d'inscription
samedi 21 avril 2007
Statut
Membre
Dernière intervention
25 juillet 2008

Parfait !
lmirak
Messages postés
3
Date d'inscription
vendredi 8 juin 2007
Statut
Membre
Dernière intervention
10 juillet 2008

comment on peut ajouté l'année STP
leo1023
Messages postés
6
Date d'inscription
dimanche 5 février 2006
Statut
Membre
Dernière intervention
22 octobre 2006

Bravo hippyz pour ton script !
gfdfgdfgdfgdf
Messages postés
2
Date d'inscription
mercredi 21 décembre 2005
Statut
Membre
Dernière intervention
8 janvier 2006

cool sa marche super simple a installé merci pour le script
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30
on n'utilises pas mais
, c'est totalement différent, de plus, si tu veux faire du xhtml, faut pas mettre de align aux p, mais des style...

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.