Horloge suisse en JS V1.0

2026-08-21 11:03:00 +02:00
commit 4ac4432896
4 changed files with 1149 additions and 0 deletions
@@ -0,0 +1,492 @@
+# 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 :
+
+```text
+horloge.js
+```
+
+dans le même répertoire que la page HTML.
+
+Exemple :
+
+```text
+mon-projet/
+├── index.html
+└── horloge.js
+```
+
+---
+
+## Utilisation
+
+Dans la page HTML, créer un conteneur pour l'horloge :
+
+```html
+<div id="monHorlogeLocale" class="w-24 h-24"></div>
+```
+
+Puis charger `horloge.js` :
+
+```html
+<script src="./horloge.js"></script>
+```
+
+Enfin, initialiser l'horloge :
+
+```html
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    new SwissClock("monHorlogeLocale", false);
+  });
+</script>
+```
+
+---
+
+## Exemple complet
+
+```html
+<!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 :
+
+```text
+String
+```
+
+Identifiant HTML du conteneur dans lequel l'horloge doit être créée.
+
+Exemple :
+
+```javascript
+new SwissClock("monHorlogeLocale", false);
+```
+
+Le JavaScript recherchera :
+
+```html
+<div id="monHorlogeLocale"></div>
+```
+
+---
+
+#### `useUTC`
+
+Type :
+
+```text
+Boolean
+```
+
+Détermine si l'horloge utilise l'heure UTC ou l'heure locale.
+
+| Valeur  | Fonction     |
+| ------- | ------------ |
+| `false` | Heure locale |
+| `true`  | Heure UTC    |
+
+Exemple :
+
+```javascript
+new SwissClock("horlogeFrance", false);
+```
+
+utilise l'heure locale du navigateur.
+
+```javascript
+new SwissClock("horlogeUTC", true);
+```
+
+utilise l'heure UTC.
+
+---
+
+# Plusieurs horloges
+
+Il est possible d'utiliser autant d'horloges que nécessaire.
+
+Exemple :
+
+```html
+<div id="paris" class="w-32 h-32"></div>
+<div id="utc" class="w-32 h-32"></div>
+```
+
+Puis :
+
+```javascript
+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 :
+
+```html
+<div id="horloge" class="w-24 h-24"></div>
+```
+
+correspond environ à :
+
+```text
+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 :
+
+```html
+<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 :
+
+```html
+<div id="horloge" style="width: 200px; height: 200px;"></div>
+```
+
+Ou une classe CSS :
+
+```html
+<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 :
+
+```javascript
+new SwissClock("monHorlogeLocale", false);
+```
+
+la classe :
+
+1. recherche le conteneur HTML ;
+2. crée un élément SVG ;
+3. crée le cadran ;
+4. crée les 60 graduations ;
+5. crée l'aiguille des heures ;
+6. crée l'aiguille des minutes ;
+7. crée la trotteuse rouge ;
+8. crée le contrepoids ;
+9. crée le moyeu central ;
+10. démarre la mise à jour de l'heure.
+
+---
+
+# SVG
+
+Le dessin utilise un système de coordonnées :
+
+```text
+0 0 100 100
+```
+
+défini par :
+
+```javascript
+svg.setAttribute("viewBox", "0 0 100 100");
+```
+
+L'horloge est ensuite étirée automatiquement sur toute la taille du conteneur :
+
+```javascript
+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 :
+
+```javascript
+const hourAngle = (hours % 12) * 30 + minutes * 0.5;
+```
+
+L'aiguille se déplace donc progressivement entre deux heures.
+
+---
+
+## Aiguille des minutes
+
+```javascript
+const minuteAngle = minutes * 6 + seconds * 0.1;
+```
+
+L'aiguille des minutes progresse également progressivement.
+
+---
+
+## Trotteuse
+
+Chaque seconde correspond à :
+
+```text
+360° / 60 = 6°
+```
+
+Le calcul utilisé est :
+
+```javascript
+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 :
+
+```javascript
+new SwissClock("horloge", false);
+```
+
+JavaScript utilise :
+
+```javascript
+getHours();
+getMinutes();
+getSeconds();
+getMilliseconds();
+```
+
+L'heure correspond à celle définie par le système du navigateur.
+
+---
+
+# Heure UTC
+
+Pour afficher UTC :
+
+```javascript
+new SwissClock("horloge", true);
+```
+
+JavaScript utilise :
+
+```javascript
+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 :
+
+```text
+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
+
+```text
+projet/
+│
+├── index.html
+│
+└── horloge.js
+```
+
+Le HTML charge ensuite :
+
+```html
+<script src="./horloge.js"></script>
+```
+
+---
+
+# Exemple avec trois horloges
+
+```html
+<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.