Aller au menu - Aller au contenu

Créer une horloge animée avec CSS3 et Javascript

Informations sur le tutoriel

Avatar
Auteur : berdes1
Difficulté : Facile
Visualisations : 266 559
Licence : Creative Commons BY-NC-SA


Plus d'informations Plus d'informations

Historique des mises à jour

  • Le 10/03/2010 à 19:55:51
    Ajout d'informations pour la compatibilitée avec tous les navigateurs
  • Le 20/02/2010 à 18:10:23
    Petite correction
  • Le 19/02/2010 à 22:13:01
    Petites modifications et déplacement de l'ajout du cadran dans le javascript au lieu de la css
Le but de ce tutoriel sera de vous montrer comment exploiter certaines propriétés CSS3 pour créer une horloge et comment l'animer avec Javascript.
La création de ce petit module nécessite peu de connaissances : il suffit de connaître les bases du Javascript, du CSS et, bien sûr, de l'HTML. :)

Ce module n'est pas compatible avec tous les navigateurs (voir un peu plus loin) ! :(.
EDIT : En fait on peut se débrouiller avec tous les navigateurs connus, mais je n'ai pas encore pris le temps de mettre le tutoriel à jours. Vous avez quelques informations là-dessus dans la conclusion

Voici un aperçu du résultat final :

Image utilisateur
La grande question est de savoir si c'est le matin ou l'après-midi :-°
Sommaire du tutoriel :
Icône du chapitre

Introduction

Le gros problème de ce module est la compatibilité. En effet, il utilise des propriétés CSS3 qui ne sont actuellement pas prises en charge par la plupart des navigateurs.
Voici la liste des navigateurs qui le supportent :
  • Firefox 3.5 et plus ;
  • Safari 3.0.4 et plus ;
  • Google Chrome ;

En réalité, ce sont plus exactement les navigateurs utilisant Webkit ou Gecko (dans leurs versions récentes).

Si vous voulez savoir si votre navigateur peut afficher le module, allez sur cette page. Si votre navigateur n'est pas compatible, il faudra vous procurer un navigateur plus récent pour Safari et Firefox et en changer pour les autres.

Nous verrons quand même comment faire pour que tous navigateurs affichent une page correcte sans bug, même s'ils ne sont pas compatibles.

Le fonctionnement de l'horloge

Dans cette partie, je vais expliquer le principe de ce module, comment il fonctionne. On va décortiquer son fonctionnement pour pouvoir coder efficacement et sans tracas. :) On ne codera que dans la partie suivante.

Transform et transform-origin


Le module se base sur les propriétés CSS3 transform et transform-origin. La première propriété transforme (quelle surprise :D ) un élément de la page. Les transformations les plus intéressantes sont la mise à l'échelle, la rotation et la translation. Nous ne nous servirons que de la rotation.
Voici un exemple d'utilisation pour que vous compreniez bien comment cela fonctionne :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
      <title>Créer une horloge animée avec CSS3 et Javascript</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
        h1
         {
            -moz-transform: rotate(-5deg);
            -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
            -moz-transform-origin: center center;
            -webkit-transform-origin: center center;
            transform-origin: center center;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Mon super titre</h1>
   </body>
</html>

Le résultat ici.

Eh ! Mais je croyais qu'on utilisait juste les propriétés transform et transform-origin ! o_O

Qu'est ce que c'est que ces -moz- et -webkit- ?


Bonne question. En fait, ces propriétés ne sont pas encore dans les standards du W3C (la spécification CSS3 n'étant pas encore finalisée), donc les navigateurs qui les utilisent mettent un préfixe (-moz- pour Mozilla, -webkit- pour Safari, -ms- pour Internet Explorer et -o- pour Opera) pour ne pas interférer avec les standards. Il est tout de même préférable de rajouter les propriétés sans suffixe pour qu'elles fonctionnent pleinement le jour où un navigateur ne comprendra que la propriété non suffixé (Merci à SpaceFox pour la remarque).

Ça veut dire qu'on devra mettre -moz-* et -webkit-* à chaque fois ?

Malheureusement, oui.

On décortique le code



L'xHTML


Pour la partie xHTML, l'horloge est très simple, vu que ce sont trois images (les trois aiguilles) dans un conteneur (ici un div).

Le CSS


Du côté du CSS, ça reste toujours aussi simple :
  • Pour la présentation, on va mettre le cadran comme fond de l'horloge. On va arrondir les bords du div conteneur de l'horloge pour qu'il fasse un cercle entourant le cadran et on va placer l'horloge à un endroit particulier de la page.
  • Au niveau du fonctionnement de l'horloge, on va déterminer la position des aiguilles par rapport à l'horloge et leur centre de rotation.


Le Javascript


C'est ici que résident tous les secrets de cette horloge.
On va commencer par déterminer le nombre de secondes écoulées depuis le début de la journée.
Ensuite, on va faire tourner les aiguilles pour qu'elles indiquent l'heure du chargement de la page.
Et enfin, toutes les secondes, on va incrémenter le nombre de secondes écoulées depuis le début de la journée, puis replacer les aiguilles en conséquence.


Avouez tout de même que le fonctionnement est vraiment simple ! :)

On code

Nous y voici donc, au codage de cette horloge. Cela va aller assez vite, vu que l'on a déjà fait 70% du travail en décortiquant le fonctionnement de l'horloge.

L'xHTML


On va donc commencer par mettre un div qui contient les 3 aiguilles :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Horloge</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
   <div id="horloge">
      <img class="aig" id="aigS" src="aigS.png" alt="aiguille des secondes" />
      <img class="aig" id="aigM" src="aigM.png" alt="aiguille des minutes" />
      <img class="aig" id="aigH" src="aigH.png" alt="aiguille des heures" />
   </div>
</body>
</html>

Voici d'ailleurs les images des trois aiguilles, ainsi que le cadran (vous remarquerez au passage mon talent particulier d'artiste :p ) :


Le CSS


On met l'horloge en position: relative; . Cela permet de pouvoir positionner les aiguilles en fonction de l'emplacement de l'horloge.
On met les aiguilles en position: absolute; .
On met le cadran : background: url('cadran.png'); .
On agrandit l'horloge pour que le cadran soit entier et on la place sur la page : height: 567px; width: 567px; .
On met le bas des aiguilles au milieu de l'horloge : bottom: 283px; .
On règle l'abscisse des aiguilles : /* aiguille des secondes : */left: 283px; /* pour les deux autres : */left : 278px; .
On place le centre de rotation des aiguilles : -moz-transform-origin: bottom center; -webkit-transform-origin: bottom center; .
Et enfin, on met une bordure à l'horloge et on l'arrondit pour qu'elle soit circulaire : border: 1px solid black; -moz-border-radius: 284px; -webkit-border-radius: 284px; border-radius: 284px; . On indique ici la valeur de l'arrondi en pixels parce que webkit n'accepte pas la valeur en pourcentage.

On met tout ça dans le code HTML :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Horloge</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
      .aig
      {
         position: absolute;
         bottom: 283px;
         -moz-transform-origin: bottom center;
         -webkit-transform-origin: bottom center;
         transform-origin: bottom center;
      }
      #horloge
      {
         position: relative;
         height: 567px;
         width: 567px;
         border: 1px solid black;
         -moz-border-radius: 284px;
         -webkit-border-radius: 284px;
         border-radius: 284px;
         background: url('cadran.png');
      }
   </style>
</head>
<body>
   <div id="horloge">
      <img class="aig" id="aigS" src="aigS.png" alt="aiguille des secondes" style="left: 283px;" />
      <img class="aig" id="aigM" src="aigM.png" alt="aiguille des minutes" style="left: 278px;" />
      <img class="aig" id="aigH" src="aigH.png" alt="aiguille des heures" style="left: 278px;" />
   </div>
</body>
</html>


Le Javascript


On détermine le nombre de secondes écoulées depuis le début de la journée :
Code : JavaScript
1
2
var d    = new Date();
var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

On place les aiguilles. Je vais expliquer les calculs juste après :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var aigS = document.getElementById('aigS');
var aigM = document.getElementById('aigM');
var aigH = document.getElementById('aigH');

aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';

Je devine que tout le monde sait que dans un cercle, il y a 360 degrés. Et tout le monde sait qu'il y a 60 secondes, 60 minutes et 12 heures sur un cadran d'horloge (du moins je l'espère :D ).
On va utiliser la proportionnalité pour comprendre comment ça marche :

Nombre de degrésMinutes, secondesHeures
360 60 12
Nombre inconnu
(noté x)		 Nombre de minutes ou secondes
(notées respectivement « m » et « s »)		 Nombre d'heures
(notées « h »)

Comme vous le voyez, il n'y a qu'un nombre inconnu ( : x ) donc pour calculer l'angle de décalage de l'aiguille des secondes, on doit faire : x_s=\frac{360s}{60}
Pour celle des minutes, on doit faire : x_m=\frac{360m}{60}
Et pour celle des heures, on fait : x_h=\frac{360h}{12}
Et donc en simplifiant, on obtient respectivement : x_s=6s\qquad ;\qquad x_m=6m\qquad;\qquad x_h=30h

Oui, mais on ne possède que le nombre de secondes !

J'y viens, j'y viens. Je devine que tout le monde sait qu'il y a 3600 secondes dans une heure et 60 secondes dans une minute.
Donc on a : m=\frac{s}{60}\qquad;\qquad h=\frac{s}{3600}
Les calculs de tout à l'heure deviennent donc, en simplifiant : x_s=6s\qquad ;\qquad x_m=\frac{s}{10}\qquad;\qquad x_h=\frac{s}{120}

Retournons à notre Javascript…

Attends, c'est quoi ce parseInt ?

C'est juste l'arrondi, ce qui permet d'avoir un angle d'orientation de l'aiguille entier. C'est juste pour éviter que toutes les aiguilles changent toutes les secondes d'orientation. C'est donc facultatif.

Donc, retournons à notre Javascript :
Il nous reste juste à faire en sorte que l'horloge se « mette à l'heure » (c'est le cas de le dire :p ) toutes les secondes.
Pour cela, on va utiliser setInterval() qui va exécuter une fonction toutes les x millisecondes :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
setInterval(function() {
   time++;
   aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
   aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
   aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
   aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
   aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
   aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
   aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
   aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
   aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
}, 1000);


On a donc au final ce code Javascript :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var d    = new Date();
var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

var aigS = document.getElementById('aigS');
var aigM = document.getElementById('aigM');
var aigH = document.getElementById('aigH');

aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';

setInterval(function() {
   time++;
   aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
   aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
   aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
   aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
   aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
   aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
   aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
   aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
   aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
}, 1000);


Et inséré dans le code HTML ça donne :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Horloge</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
      .aig
      {
         position: absolute;
         bottom: 283px;
         -moz-transform-origin: bottom center;
         -webkit-transform-origin: bottom center;
         transform-origin: bottom center;
      }
      #horloge
      {
         position: relative;
         height: 567px;
         width: 567px;
         border: 1px solid black;
         -moz-border-radius: 284px;
         -webkit-border-radius: 284px;
         border-radius: 284px;
         background: url('cadran.png');
      }
   </style>
   <script type="text/javascript">
      var d    = new Date();
      var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

      var aigS = document.getElementById('aigS');
      var aigM = document.getElementById('aigM');
      var aigH = document.getElementById('aigH');

      aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
      aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';

      setInterval(function() {
         time++;
         aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
         aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      }, 1000);
   </script>
</head>
<body>
   <div id="horloge">
      <img class="aig" id="aigS" src="aigS.png" alt="aiguille des secondes" style="left: 283px;" />
      <img class="aig" id="aigM" src="aigM.png" alt="aiguille des minutes" style="left: 278px;" />
      <img class="aig" id="aigH" src="aigH.png" alt="aiguille des heures" style="left: 278px;" />
   </div>
</body>
</html>


Attendez, il faut attendre que la page soit chargée pour exécuter le Javascript, sinon, il ne va pas trouver les éléments HTML (vu qu'ils ne seront pas encore chargés). Il faut donc faire :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Horloge</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
      .aig
      {
         position: absolute;
         bottom: 283px;
         -moz-transform-origin: bottom center;
         -webkit-transform-origin: bottom center;
         transform-origin: bottom center;
      }
      #horloge
      {
         position: relative;
         height: 567px;
         width: 567px;
         border: 1px solid black;
         -moz-border-radius: 284px;
         -webkit-border-radius: 284px;
         border-radius: 284px;
         background: url('cadran.png');
      }
   </style>
   <script type="text/javascript">
   window.onload = function()
   {
      var d    = new Date();
      var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

      var aigS = document.getElementById('aigS');
      var aigM = document.getElementById('aigM');
      var aigH = document.getElementById('aigH');

      aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
      aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';

      setInterval(function() {
         time++;
         aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
         aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      }, 1000);
   }
   </script>
</head>
<body>
   <div id="horloge">
      <img class="aig" id="aigS" src="aigS.png" alt="aiguille des secondes" style="left: 283px;" />
      <img class="aig" id="aigM" src="aigM.png" alt="aiguille des minutes" style="left: 278px;" />
      <img class="aig" id="aigH" src="aigH.png" alt="aiguille des heures" style="left: 278px;" />
   </div>
</body>
</html>


Vous pouvez voir le résultat ici. Attention, le cadran de fond est assez long à charger la première fois.

Pour aller plus loin

Cette partie sera plus difficile que celle que l'on vient de faire et sera moins détaillée.


Compatibilité


On a réussi à créer notre horloge, mais elle n'est compatible qu'avec certains navigateurs et de ce fait s'affiche mal dans les autres.
On va commencer par régler ce problème. Tout d'abord, il ne faut pas afficher les aiguilles et le cadran, on va donc les supprimer de l'HTML et de la CSS :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Horloge</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
      .aig
      {
         position: absolute;
         bottom: 283px;
         -moz-transform-origin: bottom center;
         -webkit-transform-origin: bottom center;
         transform-origin: bottom center;
      }
      #horloge
      {
         position: relative;
         height: 567px;
         width: 567px;
         border: 1px solid black;
         -moz-border-radius: 284px;
         -webkit-border-radius: 284px;
         border-radius: 284px;
      }
   </style>
   <script type="text/javascript">
   window.onload=function()
   {
      var d    = new Date();
      var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

      var aigS = document.getElementById('aigS');
      var aigM = document.getElementById('aigM');
      var aigH = document.getElementById('aigH');

      aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
      aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
      aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';

      setInterval(function() {
         time++;
         aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
         aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
      }, 1000);
   }
   </script>
</head>
<body>
   <div id="horloge">
   </div>
</body>
</html>

On va les afficher en Javascript via DOM :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var aigS = document.createElement('img');
   aigS.setAttribute('src'  , 'aigS.png');
   aigS.setAttribute('class', 'aig');
   aigS.setAttribute('alt'  , 'aiguille des secondes');
   aigS.setAttribute('style', 'left: 283px;');

var aigM = document.createElement('img');
   aigM.setAttribute('src'  , 'aigM.png');
   aigM.setAttribute('class', 'aig');
   aigM.setAttribute('alt'  , 'aiguille des minutes');
   aigM.setAttribute('style', 'left: 278px;');

var aigH = document.createElement('img');
   aigH.setAttribute('src'  , 'aigH.png');
   aigH.setAttribute('class', 'aig');
   aigH.setAttribute('alt'  , 'aiguille des heures');
   aigH.setAttribute('style', 'left: 278px;');

var horloge = document.getElementById('horloge');
   horloge.appendChild(aigS);
   horloge.appendChild(aigM);
   horloge.appendChild(aigH);
   horloge.setAttribute('style', 'background: url(\'cadran.png\');');


Et maintenant, on va n'exécuter le Javascript que si le navigateur est compatible :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
window.onload = function()
   {
      if(document.getElementsByTagName('body')[0].style.MozTransform
         || document.getElementsByTagName('body')[0].style.WebkitTransform
         || document.getElementsByTagName('body')[0].style.transform)
      {
         var aigS = document.createElement('img');
            aigS.setAttribute('src'  , 'aigS.png');
            aigS.setAttribute('class', 'aig');
            aigS.setAttribute('alt'  , 'aiguille des secondes');
            aigS.setAttribute('style', 'left: 283px;');

         var aigM = document.createElement('img');
            aigM.setAttribute('src'  , 'aigM.png');
            aigM.setAttribute('class', 'aig');
            aigM.setAttribute('alt'  , 'aiguille des minutes');
            aigM.setAttribute('style', 'left: 278px;');

         var aigH = document.createElement('img');
            aigH.setAttribute('src'  , 'aigH.png');
            aigH.setAttribute('class', 'aig');
            aigH.setAttribute('alt'  , 'aiguille des heures');
            aigH.setAttribute('style', 'left: 278px;');

         var horloge = document.getElementById('horloge');
            horloge.appendChild(aigS);
            horloge.appendChild(aigM);
            horloge.appendChild(aigH);
            horloge.setAttribute('style', 'background: url(\'cadran.png\');');

         var d    = new Date();
         var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

         aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
         aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
         aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';

         setInterval(function() {
            time++;
            aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
            aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
            aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
            aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         }, 1000);
      }
   };

Ce qui donne au final :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Horloge</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
      .aig
      {
         position: absolute;
         bottom: 283px;
         -moz-transform-origin: bottom center;
         -webkit-transform-origin: bottom center;
         transform-origin: bottom center;
      }
      #horloge
      {
         position: relative;
         height: 567px;
         width: 567px;
         border: 1px solid black;
         -moz-border-radius: 284px;
         -webkit-border-radius: 284px;
         border-radius: 284px;
      }
   </style>
   <script type="text/javascript">
   window.onload = function()
      {
         if(document.getElementsByTagName('body')[0].style.MozTransform
            || document.getElementsByTagName('body')[0].style.WebkitTransform
            || document.getElementsByTagName('body')[0].style.transform)
         {
            var aigS = document.createElement('img');
               aigS.setAttribute('src'  , 'aigS.png');
               aigS.setAttribute('class', 'aig');
               aigS.setAttribute('alt'  , 'aiguille des secondes');
               aigS.setAttribute('style', 'left: 283px;');

            var aigM = document.createElement('img');
               aigM.setAttribute('src'  , 'aigM.png');
               aigM.setAttribute('class', 'aig');
               aigM.setAttribute('alt'  , 'aiguille des minutes');
               aigM.setAttribute('style', 'left: 278px;');

            var aigH = document.createElement('img');
               aigH.setAttribute('src'  , 'aigH.png');
               aigH.setAttribute('class', 'aig');
               aigH.setAttribute('alt'  , 'aiguille des heures');
               aigH.setAttribute('style', 'left: 278px;');

            var horloge = document.getElementById('horloge');
               horloge.appendChild(aigS);
               horloge.appendChild(aigM);
               horloge.appendChild(aigH);
               horloge.setAttribute('style', 'background: url(\'cadran.png\');');

            var d    = new Date();
            var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

            aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
            aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
            aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
            aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';

            setInterval(function() {
               time++;
               aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
               aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
               aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
               aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
               aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
               aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
               aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
               aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
               aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
            }, 1000);
         }
      };
   </script>
</head>
<body style="-moz-transform:none;-webkit-transform:none;transform:none">
   <div id="horloge">
   </div>
</body>
</html>


Alléger son code


Ici, on va voir comment faire pour que le script prenne un peu moins de place sans être pour autant illisible. :)
En fait, pour l'instant, il n'y a qu'une chose à faire : il y a exactement deux fois le même groupe d'instructions dans le script. On va donc créer une fonction qui exécutera ces instructions :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
window.onload = function()
   {
      
      if(document.getElementsByTagName('body')[0].style.MozTransform
         || document.getElementsByTagName('body')[0].style.WebkitTransform
         || document.getElementsByTagName('body')[0].style.transform)
      {
         function aig()
         {
            aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
            aigM.style.MozTransform    = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigM.style.WebkitTransform = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigM.style.transform       = 'rotate(' + (parseInt(time / 10)) + 'deg)';
            aigH.style.MozTransform    = 'rotate(' + (parseInt(time / 120)) + 'deg)';
            aigH.style.WebkitTransform = 'rotate(' + (parseInt(time / 120)) + 'deg)';
            aigH.style.transform       = 'rotate(' + (parseInt(time / 120)) + 'deg)';
         }

         var aigS = document.createElement('img');
            aigS.setAttribute('src'  , 'aigS.png');
            aigS.setAttribute('class', 'aig');
            aigS.setAttribute('alt'  , 'aiguille des secondes');
            aigS.setAttribute('style', 'left: 283px;');

         var aigM = document.createElement('img');
            aigM.setAttribute('src'  , 'aigM.png');
            aigM.setAttribute('class', 'aig');
            aigM.setAttribute('alt'  , 'aiguille des minutes');
            aigM.setAttribute('style', 'left: 278px;');

         var aigH = document.createElement('img');
            aigH.setAttribute('src'  , 'aigH.png');
            aigH.setAttribute('class', 'aig');
            aigH.setAttribute('alt'  , 'aiguille des heures');
            aigH.setAttribute('style', 'left: 278px;');

         var horloge = document.getElementById('horloge');
            horloge.appendChild(aigS);
            horloge.appendChild(aigM);
            horloge.appendChild(aigH);
            horloge.setAttribute('style', 'background: url(\'cadran.png\');');

         var d    = new Date();
         var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();
         aig();
         setInterval(function() {
            time++;
            aig();
         }, 1000);
      }
   };


Garder la pendule à l'heure


Encore un dernier petit truc : la fonction setInterval peut se décaler assez rapidement pour arriver à un décalage de une à deux minute(s) en une heure (au pire). On va donc régler ce problème en ajoutant cette ligne de code à la fin du script précédent :
Code : JavaScript
1
2
3
4
setInterval(function() {
   d    = new Date();
   time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();
}, 60000);


Vous avez la version finale ici.

À vous !


On a enfin réussi à terminer cette horloge, mais il reste encore des améliorations possibles. Voici une liste non exhaustive de ce que vous pouvez améliorer :
  • Réduire la taille de l'horloge ;
  • faire en sorte que l'horloge soit plus rapide à télécharger (c'est le cadran qui est lourd) ;
  • permettre à l'utilisateur de déplacer l'horloge sur la page ;
  • permettre à l'utilisateur de fermer l'horloge ;
  • faire un cadran et des aiguilles plus jolis ;
  • afficher l'heure en digital pour ceux qui ne peuvent pas avoir l'horloge ;
  • …

Q.C.M.

Pourquoi certaines propriétés de CSS commencent par -moz- ou -webkit- ?
Quel est l'utilité de ce code :

Code : JavaScript
1
2
3
4
setInterval(function() {
   d    = new Date();
   time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();
}, 60000);

Statistiques de réponses au QCM

Maintenant, vous savez comment faire une jolie horloge pour votre site. :) Mais surtout, vous connaissez de nouvelles propriétés CSS (et peut-être de nouvelles choses en Javascript).
Je vous invite à aller regarder les autres propriétés disponibles via -webkit-* et -moz-* (et aussi -o-* et -ms-*) grâce à ces liens (merci à Thunderseb ^^ ) :

Voici une autre horloge également réalisée pour des sites web, mais avec une autre technique :

Et voici un site (en anglais) parlant du CSS3 si vous voulez aller plus loin.

Si vous constatez une erreur ou une inexactitude dans ce tutoriel, ou bien que vous avez des remarques à faire, n'hésitez pas à poster un commentaire.


Je viens de me rendre compte que on peut aussi faire marcher l'horloge avec Opéra 10.5 en utilisant le préfixe -o- (si vous avez bien compris le tutoriel, vous devriez être capable de vous débrouiller tout seul). Le pire, c'est que j'ai aussi trouvé comment faire pour Internet Explorer : Faire des rotations avec Internet Explorer (quelques recherches supplémentaires sur HTC peuvent être nécessaire).

Informations sur le tutoriel

Retour en haut Retour en haut

Créé : Le 31/03/2009 à 21:56:02
Modifié : Le 10/03/2010 à 19:55:51
Avancement : 100%

L'orthographe, la grammaire et la présentation de ce tutoriel ont été vérifiées par les zCorrecteurs.
32 commentaires