Files

T

jfgiraud 4ac4432896 Horloge suisse en JS V1.0

2026-08-21 11:03:00 +02:00

7.9 KiB

Raw Permalink Blame History

SwissClock — Horloge suisse en JavaScript

horloge.js est une horloge analogique en JavaScript basée sur un SVG. Elle reproduit le style des horloges de gare suisses avec un cadran blanc, des graduations noires, des aiguilles noires et une trotteuse rouge.

Le fichier est autonome et peut être appelé directement depuis une page HTML.

Fonctionnalités

🕐 Horloge analogique SVG
🇨🇭 Style inspiré des horloges de gare suisses
Aiguille des heures
Aiguille des minutes
Trotteuse rouge
Contrepoids de la trotteuse
60 graduations
Graduations principales toutes les 5 minutes
Animation en temps réel
Support de l'heure locale
Support de l'heure UTC
SVG redimensionnable sans perte de qualité
Plusieurs horloges peuvent être affichées simultanément sur la même page
Aucun framework JavaScript nécessaire

Installation

Copier le fichier :

horloge.js

dans le même répertoire que la page HTML.

Exemple :

mon-projet/
├── index.html
└── horloge.js

Utilisation

Dans la page HTML, créer un conteneur pour l'horloge :

<div id="monHorlogeLocale" class="w-24 h-24"></div>

Puis charger horloge.js :

<script src="./horloge.js"></script>

Enfin, initialiser l'horloge :

<script>
  document.addEventListener("DOMContentLoaded", function () {
    new SwissClock("monHorlogeLocale", false);
  });
</script>

Exemple complet

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Horloge Suisse</title>

    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body
    class="bg-slate-900 text-slate-100 p-10 flex flex-col items-center justify-center min-h-screen"
  >
    <h1 class="text-2xl font-bold mb-6">Horloge Suisse</h1>

    <div class="flex gap-8">
      <div class="text-center">
        <div id="monHorlogeLocale" class="w-24 h-24"></div>

        <span class="text-xs text-slate-400 mt-2 block"> Locale </span>
      </div>

      <div class="text-center">
        <div id="monHorlogeUTC" class="w-24 h-24"></div>

        <span class="text-xs text-slate-400 mt-2 block"> UTC </span>
      </div>
    </div>

    <script src="./horloge.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        new SwissClock("monHorlogeLocale", false);

        new SwissClock("monHorlogeUTC", true);
      });
    </script>
  </body>
</html>

API

`new SwissClock(elementId, useUTC)`

Crée une nouvelle horloge dans l'élément HTML indiqué.

Paramètres

`elementId`

Type :

String

Identifiant HTML du conteneur dans lequel l'horloge doit être créée.

Exemple :

new SwissClock("monHorlogeLocale", false);

Le JavaScript recherchera :

<div id="monHorlogeLocale"></div>

`useUTC`

Type :

Boolean

Détermine si l'horloge utilise l'heure UTC ou l'heure locale.

Valeur	Fonction
`false`	Heure locale
`true`	Heure UTC

Exemple :

new SwissClock("horlogeFrance", false);

utilise l'heure locale du navigateur.

new SwissClock("horlogeUTC", true);

utilise l'heure UTC.

Plusieurs horloges

Il est possible d'utiliser autant d'horloges que nécessaire.

Exemple :

<div id="paris" class="w-32 h-32"></div>
<div id="utc" class="w-32 h-32"></div>

Puis :

new SwissClock("paris", false);
new SwissClock("utc", true);

Chaque horloge fonctionne indépendamment.

Taille de l'horloge

La taille de l'horloge est déterminée par le conteneur HTML.

Avec Tailwind CSS :

<div id="horloge" class="w-24 h-24"></div>

correspond environ à :

96 × 96 pixels

Quelques tailles Tailwind

Classes	Taille approximative
`w-16 h-16`	64 × 64 px
`w-24 h-24`	96 × 96 px
`w-32 h-32`	128 × 128 px
`w-48 h-48`	192 × 192 px
`w-64 h-64`	256 × 256 px

Exemple :

<div id="horloge" class="w-64 h-64"></div>

produit une horloge d'environ 256 × 256 pixels.

Sans Tailwind CSS

Tailwind n'est pas obligatoire.

Il est possible d'utiliser du CSS classique :

<div id="horloge" style="width: 200px; height: 200px;"></div>

Ou une classe CSS :

<style>
  .horloge {
    width: 200px;
    height: 200px;
  }
</style>

<div id="horloge" class="horloge"></div>

Fonctionnement

L'horloge est entièrement générée par JavaScript.

Lors de l'initialisation :

new SwissClock("monHorlogeLocale", false);

la classe :

recherche le conteneur HTML ;
crée un élément SVG ;
crée le cadran ;
crée les 60 graduations ;
crée l'aiguille des heures ;
crée l'aiguille des minutes ;
crée la trotteuse rouge ;
crée le contrepoids ;
crée le moyeu central ;
démarre la mise à jour de l'heure.

SVG

Le dessin utilise un système de coordonnées :

0 0 100 100

défini par :

svg.setAttribute("viewBox", "0 0 100 100");

L'horloge est ensuite étirée automatiquement sur toute la taille du conteneur :

svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

Cela permet de modifier la taille de l'horloge sans modifier le dessin.

Calcul des aiguilles

Aiguille des heures

L'angle est calculé en tenant compte des minutes :

const hourAngle = (hours % 12) * 30 + minutes * 0.5;

L'aiguille se déplace donc progressivement entre deux heures.

Aiguille des minutes

const minuteAngle = minutes * 6 + seconds * 0.1;

L'aiguille des minutes progresse également progressivement.

Trotteuse

Chaque seconde correspond à :

360° / 60 = 6°

Le calcul utilisé est :

const secondAngle = seconds * 6;

La trotteuse est rouge afin de reproduire l'apparence caractéristique des horloges suisses.

Heure locale

Pour utiliser l'heure locale :

new SwissClock("horloge", false);

JavaScript utilise :

getHours();
getMinutes();
getSeconds();
getMilliseconds();

L'heure correspond à celle définie par le système du navigateur.

Heure UTC

Pour afficher UTC :

new SwissClock("horloge", true);

JavaScript utilise :

getUTCHours();
getUTCMinutes();
getUTCSeconds();
getUTCMilliseconds();

L'horloge est donc indépendante du fuseau horaire local.

Dépendances

horloge.js ne nécessite aucune bibliothèque JavaScript externe.

Il utilise uniquement les API natives du navigateur :

JavaScript
SVG
DOM
requestAnimationFrame()

Tailwind CSS est uniquement nécessaire si les classes comme :

w-24 h-24
bg-slate-900
text-slate-100

sont utilisées dans le HTML.

Compatibilité

Le script est conçu pour fonctionner dans les navigateurs modernes prenant en charge :

JavaScript ES6+
SVG
DOM
requestAnimationFrame()

Notamment :

Firefox
Chrome
Chromium
Edge
Safari

Structure recommandée

projet/
│
├── index.html
│
└── horloge.js

Le HTML charge ensuite :

<script src="./horloge.js"></script>

Exemple avec trois horloges

<div id="locale" class="w-32 h-32"></div>
<div id="utc" class="w-32 h-32"></div>
<div id="locale2" class="w-32 h-32"></div>

<script src="./horloge.js"></script>

<script>
  new SwissClock("locale", false);
  new SwissClock("utc", true);
  new SwissClock("locale2", false);
</script>

Licence

Projet libre d'utilisation et de modification.

Le code peut être intégré dans un site personnel ou professionnel.

Auteur

horloge.js

Horloge analogique JavaScript inspirée du design des horloges de gare suisses.

7.9 KiB Raw Permalink Blame History Unescape Escape

SwissClock — Horloge suisse en JavaScript

Fonctionnalités

Installation

Utilisation

Exemple complet

API

new SwissClock(elementId, useUTC)

Paramètres

elementId

useUTC

Plusieurs horloges

Taille de l'horloge

Quelques tailles Tailwind

Sans Tailwind CSS

Fonctionnement

SVG

Calcul des aiguilles

Aiguille des heures

Aiguille des minutes

Trotteuse

Heure locale

Heure UTC

Dépendances

Compatibilité

Structure recommandée

Exemple avec trois horloges

Licence

Auteur

7.9 KiB

Raw Permalink Blame History

`new SwissClock(elementId, useUTC)`

`elementId`

`useUTC`