Affichage de l'heure par une fonction redondante.
Programmation > JavaScript
Recherche :   
Actualité Système Salon Concours Outils Programmation Devparadise Programmation HTML .Net JavaScript VBScript ASP PHP Visual Basic Perl Java Active X SQL XML WAP Delphi Graphisme Flash Web Design Promotion Référencement Publicité Valeur de votre site Outils Systèmes Windows Unix Linux Benchmark Hardware Réseaux locaux Droit Sécurité
Horloge digitale en javascript.
  Auteur : Eric PETIT

Affichage de l'heure par une fonction redondante.

Publicité 
Cette fonction vous permet d'afficher l'heure dans vos pages web.

<script language="JavaScript">
<!-- Début script
<!-- Préchargement des images -->
var nav=navigator.appName;
var Ver=parseInt(navigator.appVersion);

Vérification des navigateurs. Désolé, l'horloge ne peut pas fonctionner avec les versions moins récentes:

if (((nav == "Netscape") && (Ver >= 3)) || ((nav == "Microsoft Internet Explorer") && (Ver > 3))) {

    Chiffre0 = new Image();
    Chiffre1 = new Image();
    Chiffre2 = new Image();
    Chiffre3 = new Image();
    Chiffre4 = new Image();
    Chiffre5 = new Image();
    Chiffre6 = new Image();
    Chiffre7 = new Image();
    Chiffre8 = new Image();
    Chiffre9 = new Image();
    Eteint = new Image();
    DeuxPts = new Image();

Les images sont chargées avant de lancer l'horloge pour éviter les délais de chargement.
Ainsi l'affichage sera correct.

    Chiffre0.src = "/img/article/Chiffre0.gif";
    Chiffre1.src = "/img/article/Chiffre1.gif";
    Chiffre2.src = "/img/article/Chiffre2.gif";
    Chiffre3.src = "/img/article/Chiffre3.gif";
    Chiffre4.src = "/img/article/Chiffre4.gif";
    Chiffre5.src = "/img/article/Chiffre5.gif";
    Chiffre6.src = "/img/article/Chiffre6.gif";
    Chiffre7.src = "/img/article/Chiffre7.gif";
    Chiffre8.src = "/img/article/Chiffre8.gif";
    Chiffre9.src = "/img/article/Chiffre9.gif";

Images pour les points clignotants:

    Eteint.src = "/img/article/Eteint.gif";
    DeuxPts.src = "/img/article/DeuxPts.gif";
Ce tableau permet de faire correspondre le chiffre que l'on désire afficher et le nom de la ressource.

    var ChifArray = new initArray("Chiffre0","Chiffre1", "Chiffre2", "Chiffre3", "Chiffre4", "Chiffre5", "Chiffre6", "Chiffre7", "Chiffre8", "Chiffre9");

Attention ici: ChifArray[1] correspondra à "Chiffre0" et non à "Chiffre1"

}

initArray() est appelée une seule fois pour définir ChifArray[]

function initArray() { // Thanks JavaScript Mailing List for this function

    this.length = initArray.arguments.length
    for (var i = 0; i < this.length; i++)
    this[i+1] = initArray.arguments[i]
}

function initheure() {

    maintenant = new Date();
    Sec = maintenant.getSeconds();
    Min = maintenant.getMinutes();
    Heure = maintenant.getHours();

Décomposition du nombre de secondes en dizaines et unités de seconde pour récupérer les 2 chiffres nécessaires à l'affichage.

    if (Sec>9){
      DSec = parseInt(Sec/10);
      USec = Sec - 10*DSec;
    } else {
      DSec = 0;
      USec = Sec;
    }

A priori le test n'est pas nécessaire mais à l'usage le résultat n'était pas concluant.

Idem pour les minutes

    if (Min>9){
      DMin = parseInt(Min/10);
      UMin = Min - 10*DMin;
    } else {
      DMin = 0;
      UMin = Min;
    }

Idem pour les heures

    if (Heure>9){
      DHeure = parseInt(Heure/10);
      UHeure = Heure - 10*DHeure;
    } else {
      DHeure = 0;
      UHeure = Heure;
    }

    Pts = "Eteint";

Définition des images HTML dans l'ordre DH UH Pt1 DM UM Pt2 DS US
On peut noter ici que Java transformera les caractères apostrophes ' en guillemet " pour former le code HTML tandis que les guillemets sont utilisés pour concaténer les chaînes.

    document.write("<IMG SRC='" + "/img/article/chiffre" + DHeure +".gif" + "' ALT='Heure' WIDTH=16 HEIGHT=21 BORDER=0 Name='DH'>");
    document.write("<IMG SRC='" + "/img/article/chiffre" + UHeure +".gif" + "' ALT='Heure' WIDTH=16 HEIGHT=21 BORDER=0 Name='UH'>");
    document.write("<IMG SRC='" + "/img/article/" + Pts +".gif" + "' ALT='Heure' WIDTH=7 HEIGHT=21 BORDER=0 Name='Pt1'>");
    document.write("<IMG SRC='" + "/img/article/chiffre" + DMin +".gif" + "' ALT='Heure' WIDTH=16 HEIGHT=21 BORDER=0 Name='DM'>");
    document.write("<IMG SRC='" + "/img/article/chiffre" + UMin +".gif" + "' ALT='Heure' WIDTH=16 HEIGHT=21 BORDER=0 Name='UM'>");
    document.write("<IMG SRC='" + "/img/article/" + Pts +".gif" + "' ALT='Heure' WIDTH=7 HEIGHT=21 BORDER=0 Name='Pt2'>");
    document.write("<IMG SRC='" + "/img/article/chiffre" + DSec +".gif" + "' ALT='Heure' WIDTH=16 HEIGHT=21 BORDER=0 Name='DS'>");
    document.write("<IMG SRC='" + "/img/article/chiffre" + USec +".gif" + "' ALT='Heure' WIDTH=16 HEIGHT=21 BORDER=0 Name='US'>");

1er appel de la fonction qui va boucler sur elle-même.

    AffTemp();

}

function AffTemp(){

Tmps va servir à calculer le temps d'éxécution de la routine.

    maintenant = new Date();
    Tmps = maintenant.getTime();

    if (Pts == "DeuxPts") {

      Pts = "Eteint";
    } else {
      Pts = "DeuxPts";
    }
    <!-- Test du navigateur (type et version) -->

    if (((nav == "Netscape") && (Ver >= 3)) || ((nav == "Microsoft Internet Explorer") && (Ver > 3))) {

      <!-- Si ok affichage de l'heure -->

      maintenant = new Date();
      Sec = maintenant.getSeconds();
      Min = maintenant.getMinutes();
      Heure = maintenant.getHours();

      if (Sec>9){

        DSec = parseInt(Sec/10);
        USec = Sec - 10*DSec;
      } else {
        DSec = 0;
        USec = Sec;
      }
      if (Min>9){
        DMin = parseInt(Min/10);
        UMin = Min - 10*DMin;
      } else {
        DMin = 0;
        UMin = Min;
      }
      if (Heure>9){
        DHeure = parseInt(Heure/10);
        UHeure = Heure - 10*DHeure;
      } else {
        DHeure = 0;
        UHeure = Heure;
      }

On Affecte ici à chaque image du document le nom de sa ressource.
      document.images["DH"].src=eval
      (ChifArray[(DHeure + 1)] + ".src");
      document.images["UH"].src=eval
      (ChifArray[(UHeure + 1)] + ".src");
      document.images["Pt1"].src=eval
      (Pts + ".src");
      document.images["DM"].src=eval
      (ChifArray[(DMin + 1)] + ".src");
      document.images["UM"].src=eval
      (ChifArray[(UMin + 1)] + ".src");
      document.images["Pt2"].src=eval
      (Pts + ".src");
      document.images["DS"].src=eval
      (ChifArray[(DSec + 1)] + ".src");
      document.images["US"].src=eval
      (ChifArray[(USec + 1)] + ".src");

Attention: la fonction eval() ici est nécessaire pour transformer les chaîne de caractères.

      maintenant = new Date();
      Tmps = maintenant.getTime() - Tmps;

C'est ici qu'apparait la redondance: AffTemp() appelle AffTemp().

      pause = setTimeout("AffTemp()",(500-Tmps));

Gràce à Tmps, l'affichage tient compte du temps d'éxécution de la routine pour actualiser l'affichage toutes les 500 milli-secondes.

    }
}

// Fin script -->
</script>
</HEAD>

Appel du script:

<script language="JavaScript">
<!-- Cache le script

    initheure();
//-->
</script>

Résultat :

A lire aussi sur Devparadise.com :
  • Ajouter une barre de navigation
  • Boîtes de contenu flottantes
  • Ajuster dynamiquement la taille d'une fenêtre
  • Faire défiler verticalement un contenu dans une boîte en javascript.
  • Roll-over sonore
  • A télécharger aussi sur Devparadise.com :
  • source de l'article "Boîtes de contenu flottantes"
  • Bibliothèque javascript pour créer des boîte à contenu défilant
  • WebExpert 5
  • Protéger les images de votre site
  • Roll-Over Sonore

  • © 1997-2009 tous droits réservés Devparadise.com
    Les logos, et marques déposées sont la propriété de leurs détenteurs respectifs.
    Devparadise.com s'est engagé à respecter la confidentialité des données personnelles régies par la loi 78-17 du 6 janvier 1978.
    Déclaration C.N.I.L. n° 621623
    Horloge,digitale,javascript