JavaScript : WorldTimer (Class WTDate) - Un objet Date trilingue et 100% paramétrable

Tester la démo

Pour commencer, ce script a été testé et fonctionne correctement avec MSIE 5.5/6.x, NN 7.x et OP 7.x sous w2k et uniquement avec NN 6.x/7.x sous MacOS9.

Les objets issus de la class WTDate possédent 14 propriétés et 1 méthode.

Construction d'un objet WTDate

Tout d'abord, pensez à inclure le script de la class WTDate dans l'entête de votre document HTML.

<head> ... <script language="JavaScript" type="text/javascript" src="wtdate_class.js"> </script> ... </head>

La construction d'un objet WTDate s'effectue de manière traditionnelle.

<script language="JavaScript"> objWTD = new WTDate(); </script>

Les 5 propriétés de formatage de l'objet WTDate

Propriété objWTDate.format :
Détermine le format d'affichage de la date.
3 valeurs de type chaîne possibles :

none
short (par défaut)
long

Propriété objWTDate.mode :
Détermine le format d'affichage de l'heure.
3 valeurs de type entier possibles :

0 (par défaut)
12
24

Propriété objWTDate.lang :
Détermine la langue utilisée.
3 valeurs de type chaîne possibles :

fr (par défaut)
us
es

Propriété objWTDate.realtime :
Détermine si l'affichage de l'heure est statique ou en temps réel.
2 valeurs de type booléen possibles :

false (par défaut)
true

Propriété objWTDate.casse :
Détermine la casse des lettres pour un format de type 'long'.
2 valeurs de type chaîne possibles :

lower (par défaut)
upper

Exemple : <script> ... objWTD.format = "long"; objWTD.mode = 24; objWTD.lang = "fr"; objWTD.realtime = true; objWTD.casse = "lower"; ... </script>

Les 9 propriétés de style de l'objet WTDate

Propriété objWTDate.left :
Détermine en pixels la position X de la zone d'affichage.
Valeur de type entier (Attention, ne pas ajoutez l'unité de mesure).
Valeur par défaut : 0

Propriété objWTDate.top :
Détermine en pixels la position Y de la zone d'affichage.
Valeur de type entier (Attention, ne pas ajoutez l'unité de mesure).
Valeur par défaut : 0

Propriété objWTDate.width :
Détermine en pixels la largeur de la zone d'affichage.
Valeur de type entier (Attention, ne pas ajoutez l'unité de mesure).
Valeur par défaut : 220

Propriété objWTDate.height :
Détermine en pixels la hauteur de la zone d'affichage.
Valeur de type entier (Attention, ne pas ajoutez l'unité de mesure).
Valeur par défaut : 15

Propriété objWTDate.fontSize :
Détermine en pixels le corps du texte de la zone d'affichage.
Valeur de type entier (Attention, ne pas ajoutez l'unité de mesure).
Valeur par défaut : 10

Propriété objWTDate.color :
Détermine la couleur du texte de la zone d'affichage.
Valeur de type chaîne en notation RVB hexadécimale (#rrvvbb).
Valeur par défaut : "#000000"

Propriété objWTDate.bgColor :
Détermine la couleur de fond de la zone d'affichage.
Valeur de type chaîne en notation RVB hexadécimale (#rrvvbb).
Valeur par défaut : "#ffffff"

Propriété objWTDate.borderWidth :
Détermine en pixel l'épaisseur du cadre de la zone d'affichage.
Valeur de type entier (Attention, ne pas ajoutez l'unité de mesure)
Valeur par défaut : 1.

Propriété objWTDate.borderColor :
Détermine la couleur du cadre de la zone d'affichage.
Valeur de type chaîne en notation RVB hexadécimale (#rrvvbb).
Valeur par défaut : "#000000"

L'unique méthode de l'objet WTDate

Méthode objWTDate.displayWT(id) :
Affiche et positionne la zone d'affichage.
Cette méthode accepte en argument 1 paramètre optionnel de type chaîne.

Ce paramètre représente l'objet identifié par l'attribut HTML 'ID' dans lequel on souhaite insérer la zone d'affichage (Attention dans ce cas de figure les propriétés top et left sont désactivées.)

Si la méthode est utilisée sans paramètre, le positionnement de la zone d'affichage se fait avec les propriétés top et left. Le point de référence est le coin supérieur gauche de la fenêtre du navigateur.

Le Script

wtdate_class.js

// Définition de la classe WTDate.

function WTDate()
{
   // Initialisation des propriétes de l'objet.
   this.format = "short";
   this.lang = "fr";
   this.casse = "lower";
   this.mode = 0;
   this.realtime = false;

   this.fontSize = 10;
   this.color = "#000000"
   this.bgColor = "#ffffff";

   this.left = 0;
   this.top = 0;
   this.width = 220;
   this.height = 15;
   this.borderColor = "#000000";
   this.borderWidth = 1

   var awtD_us = new Array('sunday','monday','tuesday','wednesday','thursday','friday','saturday');
   var awtM_us = new Array('january','february','march','april','may','june','july'
      ,'august','september','october','november','december');
   var awtD_es = new Array('domingo','lunes','martes','miercoles','jueves','viernes','sabato');
   var awtM_es = new Array('enero','febrero','marzo','abril','mayo','junio','julio'
      ,'agosto','septiembre','octubre','noviembre','diciembre');
   var awtD_fr = new Array('dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi');
   var awtM_fr = new Array('janvier','février','mars','avril','mai','juin','juillet'
      ,'aoüt','septembre','octobre','novembre','decembre');

   // Initialisation des méthodes de l'objet.
   this.displayWT = function( pid )
   {
      // Contrôle des valeurs des propriétés.
      var wtformat = ( this.format != 'none' && this.format != 'short' && this.format != 'long' )? 'none' : this.format;
      var wtlang = ( this.lang != 'fr' && this.lang != 'us' && this.lang != 'es' )? 'fr' : this.lang;
      var wtcasse = ( this.casse != 'lower' && this.casse != 'upper' )? 'lower' : this.casse;
      var wtmode = ( this.mode != 'none' && this.mode != 12 && this.mode != 24 )? 'none' : this.mode;
      var wtrealtime = ( this.realtime != false && this.realtime != true)? false : this.realtime;

      var wtfontSize = ( isNaN(this.fontSize) )? 10 : this.fontSize;
      var wtleft = ( isNaN(this.left) )? 0 : this.left;
      var wttop = ( isNaN(this.top) )? 0 : this.top;
      var wtwidth = ( isNaN(this.width) )? 220 : this.width;
      var wtheight = ( isNaN(this.height) )? 15 : this.height;
      var wtborderWidth = ( isNaN(this.borderWidth) )? 1 : this.borderWidth;


      // Creation, wtformatage et affichage dans le document de l'éléments container du WorldTimer
      // *******************************************************************

      // Creation d'un nouvel identifiant pour l'objet INPUT.
      var i = 1;
      do {
         var wtid = "wtinput_" + i;
         i++;
      } while (document.getElementById(wtid));

      // Création de l'élément
      var elInput = document.createElement("INPUT");
      elInput.setAttribute('type','text');
      elInput.setAttribute('id',wtid);
      elInput.unselectable = "On";

      // Vérification de l'argument de methode
      // si il est vide : alors insertion dynamique du champ INPUT
      // sinon : insertion du champ INPUT dans l'élément référencé par 'pid'.
      if ( pid != null ) {

         // Insertion dans 'pid'.
         document.getElementById(pid).appendChild(elInput);
      } else {

         // Insertion Dynamique.
         document.getElementsByTagName('body').item(0).appendChild(elInput);
         with(document.getElementById(wtid).style) {
            position = "absolute";
            left = wtleft + "px";
            top = wttop + "px";
         }
      }

      // wtformatage du champ.
      with(document.getElementById(wtid).style) {
         width = wtwidth + "px";                  // 220 fr - 260 us et es
         height = wtheight + "px";
         borderColor = this.borderColor;
         borderStyle = "solid";
         borderWidth = wtborderWidth + "px";
         fontFamily = "sans-serif";
         fontSize = wtfontSize + "px";
         color = this.color;
         backgroundColor = this.bgColor;
         textAlign = "center";
      }


      this.engineRealTime = function()
      {
         // Recupération de la date et de l'heure courante.
         var dNow = new Date();
         var dday = dNow.getDay();
         var ddate = dNow.getDate();
         var dmonth = dNow.getMonth();
         var dyear = dNow.getFullYear();

         var dhrs = dNow.getHours();
         var dmns = dNow.getMinutes();
         var dmns = ( dmns < 10 )? '0' + dmns : dmns;
         var dscs = dNow.getSeconds();
         var dscs = ( dscs < 10 )? '0' + dscs : dscs;
         var dmil = dNow.getMilliseconds();

         // wtformat de l'heure.
         switch ( wtmode ) {
            case 'none' :
               gthetime = '';
               gseparation = '';
               break;
            case 12 :
               gampm = (dhrs > 12)? ' pm' : ' am';
               dhrs = (dhrs > 12)? dhrs-12 : dhrs;
               dhrs = (dhrs < 10)? '0' + dhrs : dhrs;
               gthetime = dhrs + '.' + dmns + '.' + dscs + gampm;
               gseparation = '  -  ';
               break;
            case 24 :
               dhrs = (dhrs < 10)? '0' + dhrs : dhrs;
               gthetime = dhrs + ':' + dmns + ':' + dscs;
               gseparation = '  -  ';
               break;
         }

         // wtformat de la date et traduction de celle-ci dans la wtlangue choisie.
         switch ( wtlang ) {
            case 'fr' :
               if (wtformat == 'long') {
                  gthedate = awtD_fr[dday] + ' ' + ddate + ' ' + awtM_fr[dmonth] + ' ' + dyear;
                  gthedate = gthedate + gseparation + gthetime;
                  break;
               }
               if (wtformat == 'short') {
                  dmonth = ((dmonth + 1) < 10)? '0' + (dmonth+1) : dmonth+1;
                  ddate = (ddate < 10)? '0' + ddate : ddate;
                  gthedate = ddate + '/' + dmonth + '/' + dyear;
                  gthedate = gthedate + gseparation + gthetime;
                  break;
               }
               if (wtformat == 'none') {
                  gthedate = gthetime;
                  break;
               }
            case 'us' :
               if (wtformat == 'long') {
                  gthedate = awtD_us[dday] + ', ' + awtM_us[dmonth] + ' ' + ddate + 'th, ' + dyear;
                  gthedate = gthedate + gseparation + gthetime;
                  break;
               }
               if (wtformat == 'short') {
                  dmonth = ((dmonth + 1) < 10)? '0' + (dmonth+1) : dmonth+1;
                  ddate = (ddate < 10)? '0' + ddate : ddate;
                  gthedate = dyear + '/' + dmonth + '/' + ddate;
                  gthedate = gthedate + gseparation + gthetime;
                  break;
               }
               if (wtformat == 'none') {
                  gthedate = gthetime;
                  break;
               }
            case 'es' :
               if (wtformat == 'long') {
                  gthedate = awtD_es[dday] + ' ' + ddate + ' de ' + awtM_es[dmonth] + ' de ' + dyear;
                  gthedate = gthedate + gseparation + gthetime;
                  break;
               }
               if (wtformat == 'short') {
                  dmonth = ((dmonth + 1) < 10)? '0' + (dmonth+1) : dmonth+1;
                  ddate = (ddate < 10)? '0' + ddate : ddate;
                  gthedate = ddate + '/' + dmonth + '/' + dyear;
                  gthedate = gthedate + gseparation + gthetime;
                  break;
               }
               if (wtformat == 'none') {
                  gthedate = gthetime;
                  break;
               }
         }



         // Gestion de la wtcasse et ecriture de la date dans le champ.
         gthedate = (wtcasse == 'upper')? gthedate.toUpperCase() : gthedate;
         document.getElementById(wtid).value = gthedate;
      }   // Fin Methode engineRealTime.

      if( wtrealtime ) { window.setInterval(this.engineRealTime, 1000) } else { this.engineRealTime(); }

   }   // Fin Methode displayWT.

}

demo_wtdate.html

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DEmo WTDate</title>
<script language="JavaScript" type="text/JavaScript" src="wtdate_class.js"></script>
<script language="JavaScript" type="text/JavaScript">
   function fDemo() {
      objwtd_1 = new WTDate();
      objwtd_1.displayWT();

      objwtd_2 = new WTDate();
      objwtd_2.format = "long";
      objwtd_2.lang = "es";
      objwtd_2.mode = 24;
      objwtd_2.casse = "lower";
      objwtd_2.realtime = true;
      objwtd_2.left = 100;
      objwtd_2.top = 100;
      objwtd_2.bgColor = "#cccccc";
      objwtd_2.color = "#ff0000";
      objwtd_2.displayWT();

      objwtd_3 = new WTDate();
      objwtd_3.displayWT("ici");
   }
</script>
</head>
<body onload="fDemo();">
<table width="100%" height="100%" border="1">
   <tr>
      <td> TD1</td>
      <td> TD2</td>
   </tr>
   <tr>
      <td> TD3</td>
      <td id="ici"> TD4</td>
   </tr>
</table>
</body>
</html>

Remarques

Du JavaScript, une cuillerée de CSS versus JSSS et une pincée de DOM et le tour est joué.
Des CSS pour le formatage de la zone d'affichage et
le DOM pour l'insertion et l'affichage.

Il est tout à fait possible de créer plusieurs instances de cet objet (ne serait-ce que pour afficher la date à un endroit et l'heure à un autre) mais n'exagérez pas !

Ce script est limité aux navigateurs de génération 5 comme je l'ai indiqué en introduction et comme toujours il est perfectible.

Bon amusement...