Tempus fugit
L'horloge qui maîtrise le temps

Le temps sera le maître de celui qui n'a pas de maître. Proverbe arabe

Nothin' last forever [...] And all your money won't another minute buy. Dust in the Wind byKansas

L'art de mesurer le temps en JavaScript

Normalement, une horloge web écrite en JavaScript affiche l'heure locale de l'ordinateur. La particularité de notre horloge est d'afficher l'heure du fuseau horaire de votre choix. Ainsi, mon site web affichera l'heure de la Provence, pas l'heure de l'ordinateur du visiteur, d'où qu'il vienne. Pas de script qui tourne sans fin inutilement: l'horloge s'arrête lorsqu'elle est hors écran et re-démarre dès qu'elle est visible.

L'Europe parle de supprimer le changement d'heure 👍, mais chaque pays de la communauté aurait le choix de rester toute l'année à l'heure d'été 👎. C'est l'heure d'été qui est artificielle par l'ajout d'une heure sur l'heure légale ou normale. En fait, l'heure d'hiver n'existe pas, c'est tout simplement un abus de langage par opposition à l'heure d'été. Notre horloge va donc se débarrasser de l'heure d'été (DST / Dailight Saving Time en anglais) pour afficher l'heure d'hiver UTC+01:00 toute l'année afin de se rapprocher davantage de l'heure solaire. Vivons bio, réglons nos horloges sur le soleil toute l'année. Et pourquoi ne pas opter carrément pour l'heure du fuseau de Greenwich UTC+00:00?

Motivé par le défi technique, j'ai créé cette horloge pour illustrer mon propre site, faute de trouver ce que je voulais sur le Web. Vous pouvez aussi l'utiliser; merci d'avoir la courtoisie de ne pas supprimer le crédit dans le ficher JS. Il n'y a aucun piège: le code, relativement simple, est sur votre serveur, donc aucune pub vicelarde en coulisse.

Plongée au cœur de l'horloge

Le script

Le script contient deux horloges; choisir une horloge. L'horloge <div class="clock">00:00:00</div> est démarrée en appelant la fonction startClock(), à l'intérieur-même du fichier clocks.js. Placer la balise <script src="clocks.js"></script> tout en bas de la page HTML.

/*! Web Clocks - © Pascal Myrta, www.tibicinagarricola.com */

"use strict";

// Clock N°1

function webClock() {
  const time = new Date(Date.now() + 36e5);
  const h = time.getUTCHours();
  const mn = time.getUTCMinutes();
  const s = time.getUTCSeconds();
  const d1 = h % 10;
  const d2 = ((h % 100) - d1) / 10;
  const d3 = mn % 10;
  const d4 = ((mn % 100) - d3) / 10;
  const d5 = s % 10;
  const d6 = ((s % 100) - d5) / 10;
  const elems = document.querySelectorAll(".clock");
  elems[0].innerHTML = `${d2}${d1}:${d4}${d3}:${d6}${d5}`;
}
function startClock() {
  var clockTimer;
  const options = {
    rootMargin: "0px",
    threshold: 1
  };
  const elems = document.querySelectorAll(".clock");
  function callback(elems, observer) {
    if (elems[0].isIntersecting) {
      clockTimer = setInterval(webClock, 1000);
    } else {
      clearInterval(clockTimer);
    }
  }
  const observer = new IntersectionObserver(callback, options);
  observer.observe(elems[0]);
}

// Clock N°2

function webClock2() {
  let time = new Date(Date.now() + 36e5).toUTCString();

  time = time.replace("Jan", "janv.");
  time = time.replace("Feb", "févr.");
  time = time.replace("Mar", "mars");
  time = time.replace("Apr", "avr.");
  time = time.replace("May", "mai");
  time = time.replace("Jun", "juin");
  time = time.replace("Jul", "juill.");
  time = time.replace("Aug", "août");
  time = time.replace("Sep", "sept.");
  time = time.replace("Oct", "oct.");
  time = time.replace("Nov", "nov.");
  time = time.replace("Dec", "déc.");

  time = time.replace("Mon,", "Lun.");
  time = time.replace("Tue,", "Mar.");
  time = time.replace("Wed,", "Mer.");
  time = time.replace("Thu,", "Jeu.");
  time = time.replace("Fri,", "Ven.");
  time = time.replace("Sat,", "Sam.");
  time = time.replace("Sun,", "Dim.");

  time = time.replace("GMT", "");

  const elems = document.querySelectorAll(".clock2");
  elems[0].innerHTML = time;
}
function startClock2() {
  var clockTimer;
  const options = {
    rootMargin: "0px",
    threshold: 1
  };
  const elems = document.querySelectorAll(".clock2");
  function callback(elems, observer) {
    if (elems[0].isIntersecting) {
      clockTimer = setInterval(webClock2, 1000);
    } else {
      clearInterval(clockTimer);
    }
  }
  const observer = new IntersectionObserver(callback, options);
  observer.observe(elems[0]);
}

startClock();
startClock2();

L'expression Tz × 36e5 cale l'horloge sur votre fuseau horaire, c'est le décalage horaire en fonction du fuseau UTC référence. Tz (time zone number) est l'offset en heures et 36E5 le convertit en millisecondes, 1 h = 36.10⁵ ms. En France métropolitaine, on a normalement UTC+01:00 (Tz = 1) pour l'heure d'hiver et UTC+02:00 (Tz = 2) pour l'heure d'été. Tz n'est pas nécessairement un entier positif. Ainsi, dans la province de Newfoundland and Labrador au Canada, on a UTC-03:30 (moins trois heures et demie), c'est à dire Tz = -3.5. Au Nepal on a UTC+05:45, soit Tz = 5.75. L'offset est entré en valeur décimale, ce qui clarifie le code mais force à un petit calcul mental pour passer, par exemple, de UTC+05:45 à 5.75 × 36E5. C'est à vous de définir votre offset; j'ai réglé l'horloge sur UTC+01:00 avec Tz = 1.

💡 Ceux qui préfèrent rester synchrone avec le troupeau peuvent afficher l'heure d'été UTC+02:00 en décalant l'offset de deux heures avec Tz = 2.

Les styles

💡 Pour des performances optimales et un chargement instantané, l'horloge peut utiliser la fonte système de votre ordinateur, avec des caractères modernes et lisibles: font-family: system-ui;. Une fonte à chasse fixe (monospace) n'est pas indispensable mais recommandée si notre horloge est centrée, afin d'éliminer les mouvements de va-et-vient parasites.

Nouvelle version

Date complète et script simplifié

On part de la méthode JavaScript toUTCString(), qui normalement donne quelque chose comme ça (en anglais): day, 00 mth year 00:00:00 GMT. Le script est très simple, il ne comporte qu'une seule ligne: new Date(Date.now() + 36e5).toUTCString(), le reste c'est du replace(). Le réglage du fuseau horaire se fait comme pour la première horloge, avec la variable Tz.