Creer Une Horloge Animee Avec Css3 Et Javascript

Crer une horloge
anime avec CSS3 et

Javascript
Par berdes1
www.openclassrooms.com
Licence Creative Commons 6 2.0

Dernire mise jour le 10/11/2012
2/22
Sommaire
Sommaire ........................................................................................................................................... 2
Lire aussi ............................................................................................................................................ 1
Crer une horloge anime avec CSS3 et Javascript ......................................................................... 3
Introduction ........................................................................................................................................................................ 3
Le fonctionnement de l'horloge ......................................................................................................................................... 4
Transform et transform-origin ...................................................................................................................................................................................... 4
On dcortique le code ................................................................................................................................................................................................. 5
On code ............................................................................................................................................................................. 5
L'xHTML ...................................................................................................................................................................................................................... 5
Le CSS ........................................................................................................................................................................................................................ 6
Le Javascript ............................................................................................................................................................................................................... 7
Pour aller plus loin ........................................................................................................................................................... 11

Compatibilit .............................................................................................................................................................................................................. 11
Allger son code ....................................................................................................................................................................................................... 17
Garder la pendule l'heure ....................................................................................................................................................................................... 20
vous ! ..................................................................................................................................................................................................................... 20
Q.C.M. ............................................................................................................................................................................. 20
Partager ..................................................................................................................................................................................................................... 21
Sommaire
3/22
Crer une horloge anime avec CSS3 et Javascript
Par
berdes1
Mise jour : 10/11/2012

Difficult : Facile
Le but de ce tutoriel sera de vous montrer comment exploiter certaines proprits CSS3 pour crer une horloge et comment
l'animer avec Javascript.
La cration de ce petit module ncessite peu de connaissances : il suffit de connatre les bases du Javascript, du CSS et, bien sr,
de l'HTML.
L'horloge telle que prsente dans ce tutoriel ne sera compatible qu'avec les navigateurs (trs) rcents. Il y a toutefois
des solutions pour remdier ce problme et des liens sont donns la fin du tutoriel.
Voici un aperu du rsultat final :
Sommaire du tutoriel :
Introduction
Le fonctionnement de l'horloge
On code
Pour aller plus loin
Q.C.M.
Introduction
Le gros problme de ce module est la compatibilit. En effet, il utilise des proprits CSS3 qui ne sont actuellement prises en
charge que par les navigateurs rcents.
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
4/22
faudra vous procurer un navigateur plus rcent.

Nous verrons quand mme comment faire pour que tous navigateurs affichent une page correcte sans bug, mme 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 dcortiquer 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 proprits CSS3 transform et transform-origin. La premire proprit transforme (quelle surprise
un lment de la page. Les transformations les plus intressantes 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
<!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>Crer une horloge anime 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 rsultat ici.
Eh ! Mais je croyais qu'on utilisait juste les proprits transform et transform-origin !
Qu'est-ce que c'est que ces -moz-, -webkit-, -o- et -ms-?
Bonne question. En fait, ces proprits (transform et transform-origin) ne sont pas encore dans les standards du W3C (la
spcification CSS3 n'tant pas encore finalise), donc les navigateurs qui les utilisent mettent un prfixe (-moz- pour Mozilla, webkit- pour Safari, -ms- pour Internet Explorer et -o- pour Opera) pour ne pas interfrer avec les standards. Il est tout de mme
prfrable de rajouter les proprits sans suffixe pour qu'elles fonctionnent pleinement le jour o un navigateur ne comprendra
que la proprit non suffixe (Merci SpaceFox pour la remarque).
a veut dire qu'on devra mettre -moz-*, -webkit-*, -o-* et -ms-* chaque fois ?
5/22
Malheureusement, oui.
On dcortique le code
L'xHTML
Pour la partie xHTML, l'horloge est trs simple, vu que ce sont trois images (les trois aiguilles) dans un conteneur (ici un div).
Le CSS
Du ct 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 rsident tous les secrets de cette horloge.
On va commencer par dterminer le nombre de secondes coules depuis le dbut de la journe.
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 incrmenter le nombre de secondes coules depuis le dbut de la journe, puis replacer les
aiguilles en consquence.
Avouez tout de mme 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 dj fait 70% du travail en dcortiquant le
fonctionnement de l'horloge.
L'xHTML
On va donc commencer par mettre un div qui contient les 3 aiguilles :
Code : HTML
<head>
<title>Horloge</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
</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
):
6/22
Aiguille des secondes

Aiguille des minutes
Aiguille des heures
Cadran
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 rgle 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 :
Code : HTML
<head>
.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;" />
7/22
</div>
</body>
</html>
Le Javascript
On dtermine le nombre de secondes coules depuis le dbut de la journe :
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 aprs :

Code : JavaScript
var aigS = document.getElementById('aigS');
var aigM = document.getElementById('aigM');
var aigH = document.getElementById('aigH');
aigS.style.MozTransform
aigS.style.WebkitTransform
aigS.style.OTransform
aigS.style.msTransform
aigS.style.transform
aigM.style.MozTransform
'deg)';
aigM.style.WebkitTransform
'deg)';
aigM.style.OTransform
'deg)';
aigM.style.msTransform
'deg)';
aigM.style.transform
'deg)';
aigH.style.MozTransform
'deg)';
aigH.style.WebkitTransform
'deg)';
aigH.style.OTransform
'deg)';
aigH.style.msTransform
'deg)';
aigH.style.transform
'deg)';
=
=
=
=
=
=
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
+
+
+
+
+
+
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
Math.round(time / 10) +
= 'rotate(' + Math.round(time / 10) +

Voici un petit tableau de proportionnalit pour comprendre les calculs :

Nombre de degrs
Minutes, secondes
Heures
360
60
12
Nombre inconnu
(not x)
Nombre de minutes ou secondes

Nombre d'heures
(notes respectivement m et s ) (notes h )
Comme vous le voyez, il n'y a qu'un nombre inconnu ( : x ), donc pour calculer l'angle de dcalage de l'aiguille des secondes, on
doit faire :
8/22
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 possde 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 excuter une fonction toutes les x millisecondes :
Code : JavaScript
setInterval(function() {
time++;
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
}, 1000);
=
=
=
=
=
=
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
+
+
+
+
+
+
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';

On a donc au final ce code Javascript :

Code : JavaScript
var d
= new Date();
d.getHours();
= 'rotate(' + (time * 6) + 'deg)';

'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
=
=
=
=
=
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
9/22
+
+
+
+
+
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';

time++;
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
}, 1000);
=
=
=
=
=
=
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
+
+
+
+
+
+
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';

Et insr dans le code HTML a donne :

Code : HTML
<head>
10/22
.aig
{
position: absolute;
bottom: 283px;
}
#horloge
{
position: relative;
height: 567px;
width: 567px;
background: url('cadran.png');
}
</style>
<script type="text/javascript">
window.onload = function() // Il faut pense attendre que la
page soit charge avant d'excuter le script
{
var d
= new Date();
d.getHours();
+ 'deg)';
+ 'deg)';
+ 'deg)';
+ 'deg)';
+ 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
=
=
=
=
=
=
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
+
+
+
+
+
+
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
Math.round(time / 10)
= 'rotate(' + Math.round(time / 10)

= 'rotate(' + Math.round(time /
time++;
= 'rotate(' + (time * 6) +
'deg)';
aigS.style.WebkitTransform = 'rotate(' + (time * 6) +
'deg)';
= 'rotate(' + (time * 6) +
'deg)';

'deg)';
'deg)';
11/22
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate('
10) + 'deg)';
aigM.style.WebkitTransform = 'rotate('
10) + 'deg)';
= 'rotate('
10) + 'deg)';
= 'rotate('
10) + 'deg)';
= 'rotate('
10) + 'deg)';
= 'rotate('
120) + 'deg)';
aigH.style.WebkitTransform = 'rotate('
120) + 'deg)';
= 'rotate('
120) + 'deg)';
= 'rotate('
120) + 'deg)';
= 'rotate('
120) + 'deg)';
}, 1000);
}
</script>
</head>
<body>
<div id="horloge">
<img class="aig" id="aigS" src="aigS.png"
secondes" style="left: 283px;" />
<img class="aig" id="aigM" src="aigM.png"
minutes" style="left: 278px;" />
<img class="aig" id="aigH" src="aigH.png"
heures" style="left: 278px;" />
</div>
</body>
</html>
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
+ Math.round(time /
alt="aiguille des
alt="aiguille des
alt="aiguille des
Vous pouvez voir le rsultat ici. Attention, le cadran de fond est assez long charger la premire fois.
Pour aller plus loin

Compatibilit
On a russi crer 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 rgler ce problme. 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
<head>
.aig
{
position: absolute;
bottom: 283px;
12/22

}
#horloge
{
position: relative;
height: 567px;
width: 567px;
}
</style>
window.onload=function()
{
var d
= new Date();
d.getHours();
+ 'deg)';
+ 'deg)';
+ 'deg)';
+ 'deg)';
+ 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
=
=
=
=
=
=
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
'rotate('
+
+
+
+
+
+
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
(time * 6) + 'deg)';
Math.round(time / 10)

time++;
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
10) + 'deg)';
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +

10) + 'deg)';
10) + 'deg)';
10) + 'deg)';
10) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
}, 1000);
}
</script>
</head>
<body>
<div id="horloge">
</div>
</body>
</html>
13/22
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'excuter le Javascript que si le navigateur est compatible :

Code : JavaScript
window.onload = function()
{
if(document.getElementsByTagName('body')[0].style.MozTransform
14/22
== ''
||
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 d
= new Date();
d.getHours();
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
= 'rotate(' + (time * 6) +

= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
10) + 'deg)';
10) + 'deg)';
10) + 'deg)';
10) + 'deg)';
10) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
120) + 'deg)';
15/22
120) + 'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
time++;
= 'rotate(' + (time * 6) +

= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
/ 10) + 'deg)';
/ 10) + 'deg)';
/ 10) + 'deg)';
/ 10) + 'deg)';
/ 10) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
}, 1000);
}
};
= 'rotate(' + Math.round(time
Vous remarquerez dans la condition que pour de sombres raisons, suivant la version Opera ne va pas donner une chane de
caractre, mais un objet CSSTransformValue, comportement qui n'est valable que pour cette proprit.
Avec l'HTML, la CSS et le Javascript, on obtient au final :
Code : HTML
<head>
.aig
{
position: absolute;
bottom: 283px;
}
#horloge
{
position: relative;
height: 567px;
16/22
width: 567px;
}
</style>
{
if(document.getElementsByTagName('body')[0].style.MozTransform == ''
||
||
||
||
||
document.getElementsByTagName('body')[0].style.transform == '')
{
var d
= new Date();
d.getHours();
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
= 'rotate(' + (time * 6) +

= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
/ 10) + 'deg)';
aigM.style.WebkitTransform = 'rotate(' + Math.round(time
/ 10) + 'deg)';
/ 10) + 'deg)';

/ 10) + 'deg)';
/ 10) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
'deg)';
17/22
time++;
= 'rotate(' + (time * 6) +

= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
= 'rotate(' + (time * 6) +
Math.round(time / 10) + 'deg)';
}, 1000);
}
};
</script>
</head>
<body>
<div id="horloge">
</div>
</body>
</html>
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
= 'rotate(' +
Allger 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 mme groupe d'instructions dans le script. On va donc crer une fonction qui excutera ces instructions :
Code : JavaScript

{
== ''
if(document.getElementsByTagName('body')[0].style.MozTransform
||
||
||
||
|| document.getElementsByTagName('body')[0].style.transform
== '')
{
function aig()
{
= 'rotate(' + (time * 6) +
'deg)';
'deg)';
= 'rotate(' + (time * 6) +
'deg)';
= 'rotate(' + (time * 6) +
'deg)';
= 'rotate(' + (time * 6) +
'deg)';
/ 10) + 'deg)';
aigM.style.WebkitTransform = 'rotate(' + Math.round(time
/ 10) + 'deg)';
/ 10) + 'deg)';
/ 10) + 'deg)';
/ 10) + 'deg)';
/ 120) + 'deg)';
aigH.style.WebkitTransform = 'rotate(' + Math.round(time
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
/ 120) + 'deg)';
}
18/22

var d
= new Date();
d.getHours();
aig();
time++;
aig();
}, 1000);
}
};
Et tant qu'on y est, on va viter au navigateur de recalculer 4 fois les mmes choses :
Code : JavaScript
function aig()
{
'deg)';
'deg)';
}
=
=
=
=
= 'rotate(' + (time * 6) + 'deg)';
=
=
=
=
=
=
=
=
Je vous laisse rflchir ce que a fait exactement. Si vous ne trouvez pas, vous avez la rponse en dessous :
Secret (cliquez pour afficher)
Ceci est une seule instruction (regardez bien le point virgule) :
Code : JavaScript
=
=
=
=
= '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 mme faon. Avec des parenthses et de
l'indentation, a donne a :
Code : JavaScript
19/22
20/22
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 dcaler assez rapidement pour arriver un dcalage de une deux
minute(s) en une heure (au pire). On va donc rgler ce problme en ajoutant cette ligne de code la fin du script prcdent :
Code : JavaScript
d
= new Date();
time = d.getSeconds() + 60 * d.getMinutes() + 3600 *
d.getHours();
}, 60000);
Vous avez la version finale ici.
vous !
On a enfin russi terminer cette horloge, mais il reste encore des amliorations possibles. Voici une liste non exhaustive de ce
que vous pouvez amliorer :
Rduire la taille de l'horloge (notamment du cadran) ;
permettre l'utilisateur de dplacer 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 accs.
Pour accder aux suivants
Connectez-vous Inscrivez-vous
Pourquoi certaines proprits de CSS commencent par -moz- ou -webkit- ?
Pour faire jolie

Pour ne pas interfrer avec les standards
Pour dire quel navigateur t le premier crer cette proprit
Quel est l'utilit de ce code :
Code : JavaScript
21/22
d
= new Date();
time = d.getSeconds() + 60 * d.getMinutes() + 3600 *
d.getHours();
}, 60000);
Cela permet d'viter les dcalages de l'horloge

Cela permet de changer la position des aiguilles toutes les secondes
Cela permet de dfinir un interval de temps durant lequel le temps va s'arrter sur Terre!
Correction !
Statistiques de rponses au Q CM
Maintenant, vous savez comment faire une jolie horloge pour votre site. Mais surtout, vous connaissez de nouvelles proprits
CSS (et peut-tre de nouvelles choses en Javascript).
Je vous invite aller regarder les autres proprits disponibles via -webkit-* et -moz-* (et aussi -o-* et -ms-*) grce 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 ralise pour des sites web, mais avec une autre technique :
Avec SVG et XBL (ncessite 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'hsitez pas
poster un commentaire.
Afin de faire fonctionner cette horloge avec les navigateurs qui n'ont pas implment les proprits CSS3, il existe un plugin
jQuery qui pourrait rsoudre vos problmes : Transformie (en anglais).
Pour les allergiques jQuery, j'ai aussi trouv cssSandpaper (en) qui vous permettra d'utiliser transform et d'autres proprits
CSS3 avec Internet Explorer et d'autres navigateurs non compatibles.
Partager

Creer Une Horloge Animee Avec Css3 Et Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Creer Une Horloge Animee Avec Css3 Et Javascript

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Creer Une Horloge Animee Avec Css3 Et Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Crer une horloge

anime avec CSS3 et

Licence Creative Commons 6 2.0

Pour aller plus loin ........................................................................................................................................................... 11

Crer une horloge anime avec CSS3 et Javascript

Mise jour : 10/11/2012

Crer une horloge anime avec CSS3 et Javascript

faudra vous procurer un navigateur plus rcent.

Crer une horloge anime avec CSS3 et Javascript

Crer une horloge anime avec CSS3 et Javascript

Aiguille des secondes

Crer une horloge anime avec CSS3 et Javascript

On place les aiguilles. Je vais expliquer les calculs juste aprs :

= 'rotate(' + Math.round(time / 10) +

Voici un petit tableau de proportionnalit pour comprendre les calculs :

Nombre de minutes ou secondes

Crer une horloge anime avec CSS3 et Javascript

Pour celle des minutes, on doit faire :

= 'rotate(' + Math.round(time / 10) +

On a donc au final ce code Javascript :

= 'rotate(' + (time * 6) + 'deg)';

Crer une horloge anime avec CSS3 et Javascript

= 'rotate(' + Math.round(time / 10) +

= 'rotate(' + Math.round(time / 10) +

Et insr dans le code HTML a donne :

Crer une horloge anime avec CSS3 et Javascript

= 'rotate(' + Math.round(time / 10)

Crer une horloge anime avec CSS3 et Javascript

Pour aller plus loin

Crer une horloge anime avec CSS3 et Javascript

-moz-transform-origin: bottom center;

= 'rotate(' + Math.round(time / 10)

Crer une horloge anime avec CSS3 et Javascript

On va les afficher en Javascript via DOM :

Et maintenant, on va n'excuter le Javascript que si le navigateur est compatible :

Crer une horloge anime avec CSS3 et Javascript

aigS.style.WebkitTransform = 'rotate(' + (time * 6) +

Crer une horloge anime avec CSS3 et Javascript

aigS.style.WebkitTransform = 'rotate(' + (time * 6) +

Crer une horloge anime avec CSS3 et Javascript

aigS.style.WebkitTransform = 'rotate(' + (time * 6) +

Crer une horloge anime avec CSS3 et Javascript

aigS.style.WebkitTransform = 'rotate(' + (time * 6) +

Allger son code

Crer une horloge anime avec CSS3 et Javascript

Crer une horloge anime avec CSS3 et Javascript

Crer une horloge anime avec CSS3 et Javascript

Garder la pendule l'heure

Vous avez la version finale ici.

Pour faire jolie

Quel est l'utilit de ce code :

Crer une horloge anime avec CSS3 et Javascript

Cela permet d'viter les dcalages de l'horloge

Vous aimerez peut-être aussi