# 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
```
Puis charger `horloge.js` :
```html
```
Enfin, initialiser l'horloge :
```html
```
---
## Exemple complet
```html
Horloge Suisse
Horloge Suisse
```
---
# 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
```
---
#### `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
```
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
```
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
```
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
```
Ou une classe CSS :
```html
```
---
# 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
```
---
# Exemple avec trois horloges
```html
```
---
# 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.