Afficher l'heure et la date en temps réel

Le 29/07/2013 à 04:59:26
Note: 4/5
Mots clés: date heure horloge javascript temps réel utilisateur heures minutes secondes jours

Bonjour,
Dans ce script, je vais vous montrer comment afficher l'heure et la date de l'utilisateur en temps réel sur une page web en javascript. Voici un aperçu du résultat:

Fonctionnement

Pour le fonctionnement, et bien , nous allons tout simplement utiliser des fonction javascript pour récuperer l'heure les minutes et les secondes. Pour la date nous allons faire la même chose sauf que pour les mois, il ne serons pas en chiffre mais en mots, 0 = janvier, 1 = février... nous allons alors faire une petit fonction pour la conversion.

Code

date_heure.js:

function date_heure(id)

{

        date = new Date;

        annee = date.getFullYear();

        moi = date.getMonth();

        mois = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');

        j = date.getDate();

        jour = date.getDay();

        jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');

        h = date.getHours();

        if(h<10)

        {

                h = "0"+h;

        }

        m = date.getMinutes();

        if(m<10)

        {

                m = "0"+m;

        }

        s = date.getSeconds();

        if(s<10)

        {

                s = "0"+s;

        }

        resultat = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee+' il est '+h+':'+m+':'+s;

        document.getElementById(id).innerHTML = resultat;

        setTimeout('date_heure("'+id+'");','1000');

        return true;

}

Â

date_heure.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Afficher la date et l'heure en temps rÃ©el en javascript</title>

        <script type="text/javascript" src="date_heure.js"></script>

    </head>

    <body>

            <span id="date_heure"></span>

            <script type="text/javascript">window.onload = date_heure('date_heure');</script>

    </body>

</html>

Essayer

Vous pouvez biensur modifier le code pour afficher la date ou l'heure à la forme voulue.
Merci

Scripts et Tutoriels similaires

Évaluer la vitesse de connexion en javascript

Se souvenir d'un visiteur Javascript - son nom et le nombre de visites script cookies

Redirection avec temps à rebours

Faire un calendrier en javascript avec un effet de transparence

Simple PHP Forum Script - Forum en php facile simple script code telecharger forum php gratuit mysql