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

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

Mis à jour le mardi 8 janvier 2013

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. :)

Voici un aperçu du résultat final :

Image utilisateur

Introduction

Le gros problème de ce module est la compatibilité. En effet, il utilise des propriétés CSS3 qui ne sont actuellement prises en charge que par les navigateurs récents.
Voici la liste des principaux navigateurs qui le supportent :

  • Firefox 3.5 et plus ;

  • Safari 3.0.4 et plus ;

  • Google Chrome ;

  • Internet Explorer 9 ;

  • Opera 10.5 et plus ;

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.

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 :

<!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);
            -o-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            transform: rotate(-5deg);
            -moz-transform-origin: center center;
            -webkit-transform-origin: center center;
            -o-transform-origin: center center;
            -ms-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-, -webkit-, -o- et -ms-?

Bonne question. En fait, ces propriétés (transform et transform-origin) 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ée (Merci à SpaceFox pour la remarque).

Ça veut dire qu'on devra mettre -moz-*, -webkit-*, -o-* et -ms-* à 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 :
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 en position relative pour pouvoir positionner les aiguilles en fonction de la position de l'horloge.

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 :

<!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 que je n'ai aucun talent 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 : 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 : transform-origin: bottom center; (je n'ai pas mis les suffixes).
Et enfin, on met une bordure à l'horloge et on l'arrondit pour qu'elle soit circulaire : border: 1px solid black; 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 :

<!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;
         -o-transform-origin: bottom center;
         -ms-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;
         -o-border-radius: 284px;
         -ms-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 :

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 :

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.OTransform      = 'rotate(' + (time * 6) + 'deg)';
aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';

Voici un petit tableau de proportionnalité pour comprendre les calculs :

Nombre de degrés

Minutes, secondes

Heures

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 :
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 :

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

On a donc au final ce code 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.OTransform      = 'rotate(' + (time * 6) + 'deg)';
aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';

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

Et inséré dans le code HTML ça donne :

<!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;
         -o-transform-origin: bottom center;
         -ms-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;
         -o-border-radius: 284px;
         -ms-border-radius: 284px;
         border-radius: 284px;
         background: url('cadran.png');
      }
   </style>
   <script type="text/javascript">
   window.onload = function() // Il faut pense à attendre que la page soit chargée avant d'exécuter le script
   {
      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.OTransform      = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
      aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';

      setInterval(function() {
         time++;
         aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.OTransform      = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
         aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.transform       = 'rotate(' + Math.round(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

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 :

<!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;
         -o-transform-origin: bottom center;
         -ms-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;
         -o-border-radius: 284px;
         -ms-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.OTransform      = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
      aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';

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

On va les afficher en Javascript via DOM :

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 :

window.onload = function()
   {
      if(document.getElementsByTagName('body')[0].style.MozTransform == ''
         || document.getElementsByTagName('body')[0].style.WebkitTransform == ''
         || document.getElementsByTagName('body')[0].style.OTransform == ''
         || document.getElementsByTagName('body')[0].style.OTransform
         || document.getElementsByTagName('body')[0].style.msTransform == ''
         || 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.OTransform      = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
         aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
         aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
         aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
         aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';

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

Vous remarquerez dans la condition que pour de sombres raisons, suivant la version Opera ne va pas donner une chaîne de caractère, mais un objet CSSTransformValue, comportement qui n'est valable que pour cette propriété.

Avec l'HTML, la CSS et le Javascript, on obtient au final :

<!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;
         -o-transform-origin: bottom center;
         -ms-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;
         -o-border-radius: 284px;
         -ms-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.OTransform == ''
            || document.getElementsByTagName('body')[0].style.OTransform
            || document.getElementsByTagName('body')[0].style.msTransform == ''
            || 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.OTransform      = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
            aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';

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

Alléger son code

Bon, je sais pas si c'est pareil pour vous, mais moi j'en ai vraiment marre de recopier à chaque code que je vous montre deux fois exactement le même groupe d'instructions dans le script. On va donc créer une fonction qui exécutera ces instructions :

window.onload = function()
   {
      
      if(document.getElementsByTagName('body')[0].style.MozTransform == ''
         || document.getElementsByTagName('body')[0].style.WebkitTransform == ''
         || document.getElementsByTagName('body')[0].style.OTransform == ''
         || document.getElementsByTagName('body')[0].style.OTransform
         || document.getElementsByTagName('body')[0].style.msTransform == ''
         || document.getElementsByTagName('body')[0].style.transform == '')
      {
         function aig()
         {
            aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.OTransform      = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
            aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.transform       = 'rotate(' + Math.round(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);
      }
   };

Et tant qu'on y est, on va éviter au navigateur de recalculer 4 fois les mêmes choses :

function aig()
{
   aigS.style.MozTransform    =
   aigS.style.WebkitTransform =
   aigS.style.OTransform      =
   aigS.style.msTransform     =
   aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
   aigM.style.MozTransform    =
   aigM.style.WebkitTransform =
   aigM.style.OTransform      =
   aigM.style.msTransform     =
   aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
   aigH.style.MozTransform    =
   aigH.style.WebkitTransform =
   aigH.style.OTransform      =
   aigH.style.msTransform     =
   aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';
}

Je vous laisse réfléchir à ce que ça fait exactement. Si vous ne trouvez pas, vous avez la réponse en dessous :

Ceci est une seule instruction (regardez bien le point virgule) :

aigS.style.MozTransform    =
aigS.style.WebkitTransform =
aigS.style.OTransform      =
aigS.style.msTransform     =
aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';

Quand il va analyser ça, le navigateur va d'abord voire que c'est une assignation et va calculer ce qui ce trouve à droite du signe « = » et va se retrouver avec une autre assignation qu'il va traiter de la même façon. Avec des parenthèses et de l'indentation, ça donne ça :

aigS.style.MozTransform =
(
   aigS.style.WebkitTransform =
   (
      aigS.style.OTransform =
         (
            aigS.style.msTransform =
               (aigS.style.transform = 'rotate(' + (time * 6) + 'deg)')
         )
   )
);

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 :

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 (notamment du cadran) ;

  • permettre à l'utilisateur de déplacer l'horloge sur la page ;

  • permettre à l'utilisateur de cacher l'horloge ;

  • faire un cadran et des aiguilles plus jolis ;

  • afficher l'heure en digital pour ceux qui ne peuvent pas avoir l'horloge ;

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.

Afin de faire fonctionner cette horloge avec les navigateurs qui n'ont pas implémenté les propriétés CSS3, il existe un plugin jQuery qui pourrait résoudre vos problèmes : Transformie (en anglais).
Pour les allergiques à jQuery, j'ai aussi trouvé cssSandpaper (en) qui vous permettra d'utiliser transform et d'autres propriétés CSS3 avec Internet Explorer et d'autres navigateurs non compatibles.

déroulement d'un cours

  • 1

    Dès aujourd'hui, vous avez accès au contenu pédagogique et aux exercices du cours.

  • 2

    Vous progressez dans le cours semaine par semaine. Une partie du cours correspond à une semaine de travail de votre part.

  • !

    Les exercices doivent être réalisés en une semaine. La date limite vous sera annoncée au démarrage de chaque nouvelle partie. Les exercices sont indispensables pour obtenir votre certification.

  • 3

    À l'issue du cours, vous recevrez vos résultats par e-mail. Votre certificat de réussite vous sera également transmis si vous êtes membre Premium et que vous avez au moins 70% de bonnes réponses.

L'auteur

Découvrez aussi ce cours en...

Exemple de certificat de réussite
Exemple de certificat de réussite