javascript animée avec css3 et créer une horloge · 2016-06-21 · le but de ce tutoriel sera de...

Créer une horlogeanimée avec CSS3 et

JavascriptPar berdes1

www.openclassrooms.com

Licence Creative Commons 6 2.0Dernière mise à jour le 10/11/2012

http://www.openclassrooms.com

Sommaire

2Sommaire ........................................................................................................................................... 1Lire aussi ............................................................................................................................................ 3 Créer une horloge animée avec CSS3 et Javascript ......................................................................... 3Introduction ........................................................................................................................................................................ 4Le fonctionnement de l'horloge ......................................................................................................................................... 4Transform et transform-origin ...................................................................................................................................................................................... 5On décortique le code ................................................................................................................................................................................................. 5On code ............................................................................................................................................................................. 5L'xHTML ...................................................................................................................................................................................................................... 6Le CSS ........................................................................................................................................................................................................................ 7Le Javascript ...............................................................................................................................................................................................................

11Pour aller plus loin ........................................................................................................................................................... 11Compatibilité .............................................................................................................................................................................................................. 17Alléger son code ....................................................................................................................................................................................................... 20Garder la pendule à l'heure ....................................................................................................................................................................................... 20À vous ! .....................................................................................................................................................................................................................

20Q.C.M. ............................................................................................................................................................................. 21Partager .....................................................................................................................................................................................................................

2/22


http://fr.openclassrooms.com

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

Par berdes1

Mise à jour : 10/11/2012Difficulté : Facile

Le but de ce tutoriel sera de vous montrer comment exploiter certaines propriétés CSS3 pour créer une horloge et commentl'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.

L'horloge telle que présentée dans ce tutoriel ne sera compatible qu'avec les navigateurs (très) récents. Il y a toutefoisdes solutions pour remédier à ce problème et des liens sont donnés à la fin du tutoriel.

Voici un aperçu du résultat final :

Sommaire du tutoriel :

IntroductionLe fonctionnement de l'horlogeOn codePour aller plus loinQ.C.M.

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

Sommaire 3/22


http://www.v3.siteduzero.com/membres-294-116261.html

http://www.v3.siteduzero.com/tutoriel-21-113169-creer-une-horloge-animee-avec-css3-et-javascript.html

http://creativecommons.org/licenses/by-nc-sa/2.0/fr/

http://www.v3.siteduzero.com/tutoriel-3-113169-creer-une-horloge-animee-avec-css3-et-javascript.html?pdf=1#ss_part_1




http://www.v3.siteduzero.com/tutoriel-3-113169-creer-une-horloge-animee-avec-css3-et-javascript.html?pdf=1#qcm

http://berdes.alwaysdata.net/SdZ/test.html


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 sontpas 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 pourpouvoir 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 )un élément de la page. Les transformations les plus intéressantes sont la mise à l'échelle, la rotation et la translation. Nous nenous servirons que de la rotation.Voici un exemple d'utilisation pour que vous compreniez bien comment cela fonctionne :

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

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 (laspé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êmepréférable de rajouter les propriétés sans suffixe pour qu'elles fonctionnent pleinement le jour où un navigateur ne comprendraque 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 ?

Créer une horloge animée avec CSS3 et Javascript 4/22


http://berdes.alwaysdata.net/SdZ/1.html


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 cercleentourant le cadran et on va placer l'horloge en position relative pour pouvoir positionner les aiguilles en fonction de la positionde 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 lesaiguilles 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 lefonctionnement de l'horloge.

L'xHTML

On va donc commencer par mettre un div qui contient les 3 aiguilles :

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" /></head><body> <div id="horloge"> <img class="aig" id="aigS" src="aigS.png" alt="aiguille dessecondes" /> <img class="aig" id="aigM" src="aigM.png" alt="aiguille desminutes" /> <img class="aig" id="aigH" src="aigH.png" alt="aiguille desheures" /> </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 ) :



http://uploads.siteduzero.com/files/162001_163000/162994.png


Aiguille des secondesAiguille des minutesAiguille des heuresCadran

Le CSS

On met l'horloge en position: relative;. Cela permet de pouvoir positionner les aiguilles en fonction de l'emplacementde 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 deuxautres : */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 enpourcentage.

On met tout ça dans le code HTML :

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 dessecondes" style="left: 283px;" /> <img class="aig" id="aigM" src="aigM.png" alt="aiguille desminutes" style="left: 278px;" /> <img class="aig" id="aigH" src="aigH.png" alt="aiguille desheures" 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

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

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 :




Pour celle des minutes, on doit faire :

Et pour celle des heures, on fait :

Et donc en simplifiant, on obtient respectivement :

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 :

Les calculs de tout à l'heure deviennent donc, en simplifiant :

Retournons à notre Javascript :Il nous reste juste à faire en sorte que l'horloge se « mette à l'heure » (c'est le cas de le dire ) toutes les secondes.Pour cela, on va utiliser setInterval() qui va exécuter une fonction toutes les x millisecondes :

Code : JavaScript

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 :

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 :

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> <script type="text/javascript"> window.onload = function() // Il faut pense à attendre que lapage 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 dessecondes" style="left: 283px;" /> <img class="aig" id="aigM" src="aigM.png" alt="aiguille desminutes" style="left: 278px;" /> <img class="aig" id="aigH" src="aigH.png" alt="aiguille desheures" 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 lesautres.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 supprimerde l'HTML et de la CSS :

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;



http://berdes.alwaysdata.net/SdZ/horloge1.html


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

Code : JavaScript

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

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

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; } </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 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 foisexactement le même groupe d'instructions dans le script. On va donc créer une fonction qui exécutera ces instructions :

Code : 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 == '') { 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 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 :

Code : JavaScript

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 :Secret (cliquez pour afficher)

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

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 dusigne « = » et va se retrouver avec une autre assignation qu'il va traiter de la même façon. Avec des parenthèses et del'indentation, ça donne ça :

Code : JavaScript



http://www.v3.siteduzero.com/tutoriel-3-113169-creer-une-horloge-animee-avec-css3-et-javascript.html?pdf=1#


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 à deuxminute(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

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 ceque 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 ;…

Q.C.M.

Le premier QCM de ce cours vous est offert en libre accès.Pour accéder aux suivants

Connectez-vous Inscrivez-vousPourquoi certaines propriétés de CSS commencent par -moz- ou -webkit- ?

Pour faire jolie Pour ne pas interférer avec les standards Pour dire quel navigateur à été le premier à créer cette propriété

Quel est l'utilité de ce code :

Code : JavaScript



http://berdes.alwaysdata.net/SdZ/horloge.html

http://www.v3.siteduzero.com/connexion

http://www.v3.siteduzero.com/inscription


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

Cela permet d'éviter les décalages de l'horloge Cela permet de changer la position des aiguilles toutes les secondes Cela permet de définir un interval de temps durant lequel le temps va s'arrêter sur Terre!

Correction !

Statistiques de réponses au Q CM

Maintenant, vous savez comment faire une jolie horloge pour votre site. Mais surtout, vous connaissez de nouvelles propriétésCSS (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) :

Extensions CSS de Mozilla ;extensions CSS dans Webkit ;extensions CSS dans Opera ;extensions CSS d'Internet Explorer 8.

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

Avec SVG et XBL (nécessite Firefox ou un navigateur basé sur WebKit comme Safari et Google Chrome).

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 pluginjQuery 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ésCSS3 avec Internet Explorer et d'autres navigateurs non compatibles.

Partager



http://www.v3.siteduzero.com/tutoriel-15-113169.html

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

http://qooxdoo.org/documentation/general/webkit_css_styles

http://www.blooberry.com/indexdot/css/properties/extensions/operaextensions.htm

http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

http://xulfr.org/demos/clock.xhtml

http://www.css3.info/

http://transformie.com/documentation.html

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

http://www4.smartadserver.com/call/pubjumpi/24617/166249/14372/M/1389183655593/?

http://www.v3.siteduzero.com/tutoriel-rss/113169.xml


javascript animée avec css3 et créer une horloge · 2016-06-21 · le but de ce tutoriel sera de...

Documents