[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > Javascript > Lecture du tutoriel

Un horloge temps réel grâce à Javascript

	Auteur : raphamil Créé : le 21/04/2008 21:13:26 Modifié : le 28/04/2008 09:45:58 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Bonjour les Zéros

Dans ce tuto, je vous apprendrais à créer une petite horloge qui s'actualise toutes les secondes. Pratique à placer dans un pied de page, par exemple.

Sommaire du chapitre :

Le principe
Correction : l'heure
Correction : la date
Et au final, ça donne quoi ?

Le principe

Le principe est simple : afficher en actualisant toutes les secondes l'heure (heures-minutes-secondes) et la date, en français et dans le format 36 Février 2100 (c'est pour l'exemple

).
Je vous prépare le terrain XHTML :

Code : HTML

1	<div id="heure_date"></div>

Voilou c'est tout !

Vous n'avez plus qu'à coder. Ce script est vraiment très simple.

Correction : l'heure

Elaborons la structure de notre fonction :

Code : JavaScript

function heure_date() {
    //Affichage
}

window.onload = function() {
    setInterval('heure_date()', 1000); //On actualise l'heure toutes les secondes
};

Pour savoir quel jour et quelle heure on est, on a besoin d'un objet Date() (logique, quand on y pense

). J'en profite pour vous donner les méthodes de l'objet Date. On va donc le créer :

Code : JavaScript

function heure_date() {
    var infos = new Date();

    //Affichage
}

Rien de bien compliqué : on affiche les heures, les minutes, et les secondes dans une jolie phrase :
document.getElementById('date_heure').innerHTML = 'Il est ' + infos.getHours() + ' heures ' + infos.getMinutes() + ', ' + infos.getSeconds() + '.';

Aïe ! Ça n'affiche pas "0" devant les nombres inférieurs à 10, c'est pas beau :euh:

Qu'à cela ne tienne, créons une fonction pour compléter ces fichus nombres avec un 0 !

Code : JavaScript

1
2
3

function compZero(nombre) {
    return nombre < 10 ? '0' + nombre : nombre;
}

Eh voilà le travail

On modifie notre petit script :

Code : JavaScript

function compZero(nombre) {
    return nombre < 10 ? '0' + nombre : nombre;
}

function heure_date() {
    var infos = new Date();

    document.getElementById('date_heure').innerHTML = 'Il est ' + compZero(infos.getHours()) + ' heures ' + compZero(infos.getMinutes()) + ', ' + compZero(infos.getSeconds()) + '.';
}

Correction : la date

Avant de créer l'affichage de la date, il va falloir préparer quelques petites choses :

Les noms de mois en français
Les noms de jours en français

On va donc créer deux arrays :

Code : JavaScript

1
2

var mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre');
var jours = new Array('lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche');

Ensuite, on va devoir bricoler un peu : on se sert du nombre renvoyé par getDay() comme indice de l'array des jours pour accéder au nom français du jour. On fait la même chose pour les mois (getMonth()) et leur array.

Stoop !!! Info de dernière minute : getDay() fait commencer la semaine par le dimanche ; il faut modifier l'array des jours !

Voilà la correction :

Code : JavaScript

var mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre');
var jours = new Array('dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi');

document.getElementById('date_heure').innerHTML += ' et nous sommes le ' + jours[temps.getDay()] + ' ' + temps.getDate() + ' ' + mois[temps.getMonth()] + ' ' + temps.getFullYear() + '.';

Et au final, ça donne quoi ?

Comme je comprends ceux qui aiment le copier-coller :lol:

. Je suis de bonne humeur, je vous donne le code source complet du script

:

Code : JavaScript

function compZero(nombre) {
    return nombre < 10 ? '0' + nombre : nombre;
}

function heure_date() {
    const infos = new Date();

    //Heure
    document.getElementById('date_heure').innerHTML = 'Il est ' + compZero(infos.getHours()) + ' heures ' + compZero(infos.getMinutes()) + ', ' + compZero(infos.getSeconds());

    //Date
    const mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre');
    const jours = new Array('dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi');
    document.getElementById('date_heure').innerHTML += ' et nous sommes le ' + jours[infos.getDay()] + ' ' + infos.getDate() + ' ' + mois[infos.getMonth()] + ' ' + infos.getFullYear() + '.';
}

window.onload = function() {
   setInterval("heure_date()", 1000); //Actualisation de l'heure
};

Remarquez que j'ai fait des variables infos, mois et jours des constantes, tout simplement parce que l'on ne l'ait modifie pas.

Et psst... Si vos autres scripts ne fonctionnent plus à cause du mien, jetez un coup d'oeil ici.

Eh bien, merci d'avoir lu ce tuto, et pour toute remarque, etc -> mp ou commentaires.

Auteur : raphamil
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Un horloge temps réel grâce à Javascript

Le principe

Correction : l'heure

Correction : la date

Et au final, ça donne quoi ?