---
layout: layouts/page.njk
title: Horloge
---
Les heures
```svg
```
Les minutes
```svg
```
Le bloc, chaque minute représente 6° (360 / 60)
```svg
```
Le viewBox permet de centrer sur le centre de l'horloge ou sur le bloc de 5 minutes
Attention si on utilise un symbole tous les éléments dans les coordonnées négatives ne sont pas affichés.
Chaque bloc de 5 minutes représente 30° (360 / 12)
```svg
...
```
### Les aiguilles
```svg
```
### Le texte
Il convient de redresser le texte après la rotation pour l'amener à sa position sur le cercle.
```svg
25
```
### Les sliders
```html
Heures :
Minutes :
```
Télécharger le fichier svg
### Le code javascript
Récupérer les éléments
```javascript
const inputh = document.querySelector("input.heure");
const inputm = document.querySelector("input.minute");
const aiguilleh = document.getElementById("aiguilleh");
const aigiullem = document.getElementById("aiguillem");
```
La fonction pour afficher les aiguilles dans la bonne position
```javascript
function Show() {
aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`;
aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`;
}
```
Attacher la fonctions aux événements `input` des sliders.
```javascript
inputm.oninput = Show;
inputh.oninput = Show;
```
Télécharger le fichier html