<html>
<head>
<style type="text/css"> /*débute la parti css */
.LightSwitch, .EmptySwitch { /*détermine la dimension des blocs*/
display: inline-block; /*affiche les éléments sur une meme ligne*/
width: 70px;
height: 70px;
margin: 2px; /*détermine la distance entre les blocs*/
-moz-border-radius: 1em 1em 1em 1em; /*affiche les coins rond sur firefox seulement*/
}
.LightOn { /*propriété des blocs actifs*/
background-color: #b112b7;
}
.LightOff { /*propriété des blocs inactifs*/
background-color: black;
}
/*fin du css*/
</style>
<script language="Javascript">
function Horloge() { //début de la fonction horloge
var thicks = setTimeout("Horloge();", 1000); //le coup d'horloge est programmé à 1 sec.
//la fonction horloge s'exécute a toute les secondes
var Maintenant = new Date(); //la variable maintenant est la date du jour
var Temps = new Array(Maintenant.getSeconds(), //la variable temps[0] est égal au secondes actuel
Maintenant.getMinutes(),//la variable temps[1] est égal au minutes actuel
Maintenant.getHours()); //la variable temps[2] est égal au heures actuel
var Type = new Array('Secondes', //variable type [0] est égal à secondes
'Minutes', //variable type [1] est égal à minutes
'Heures'); //variable type [2] est égal à heures
for ( x = 0; x < 3; x++ ) //effectu une boucle de 0 à 2
LightOn(Temps[x], Type[x]); //appel la fonction lighton
}
function LightOn(Time, Type) { //la variable time a la valeur de temps[x] et type de type[x]
var Binaire = new Array(40,20,10,8,4,2,1); //differente valeur binaire de l'horloge
var Light; //déclaration de la variable light
for ( y = 0; y < 7; y++ ) { // fait une boucle de 0 à 6
Light = document.getElementById(Type+Binaire[y]); //assigne une division html a la variable selon le ID
if ( Time >= Binaire[y] ) { //si le temps est plus grand ou égal a la valeur binaire la lumiere devien active
Light.className = 'LightSwitch LightOn'; //active la lumiere
Time -= Binaire[y]; //soustrait la valeur binaire au temps
}
else if ( Type+Binaire[y] !== 'Heures40' ) //exception pour la lumiere heure 40
Light.className = 'LightSwitch LightOff'; //désactive la lumiere
}
}
</script>
</head>
<body onload="Horloge();" style='text-align: center;'>
<!--affiche les blocs de lumiere-->
<br><br><br>
<div class="EmptySwitch"> </div><div class="LightSwitch" id='Heures8'> </div><div class="EmptySwitch"> </div>
<div class="EmptySwitch"> </div><div class="LightSwitch" id='Minutes8'> </div><div class="EmptySwitch"> </div>
<div class="EmptySwitch"> </div><div class="LightSwitch" id='Secondes8'> </div><div class="EmptySwitch"> </div><br>
<div class="EmptySwitch" id='Heures40'> </div><div class="LightSwitch" id='Heures4'> </div><div class="EmptySwitch"> </div>
<div class="LightSwitch" id='Minutes40'> </div><div class="LightSwitch" id='Minutes4'> </div><div class="EmptySwitch"> </div>
<div class="LightSwitch" id='Secondes40'> </div><div class="LightSwitch" id='Secondes4'> </div><div class="EmptySwitch"> </div><br>
<div class="LightSwitch" id='Heures20'> </div><div class="LightSwitch" id='Heures2'> </div><div class="EmptySwitch"> </div>
<div class="LightSwitch" id='Minutes20'> </div><div class="LightSwitch" id='Minutes2'> </div><div class="EmptySwitch"> </div>
<div class="LightSwitch" id='Secondes20'> </div><div class="LightSwitch" id='Secondes2'> </div><div class="EmptySwitch"> </div><br>
<div class="LightSwitch" id='Heures10'> </div><div class="LightSwitch" id='Heures1'> </div><div class="EmptySwitch"> </div>
<div class="LightSwitch" id='Minutes10'> </div><div class="LightSwitch" id='Minutes1'> </div><div class="EmptySwitch"> </div>
<div class="LightSwitch" id='Secondes10'> </div><div class="LightSwitch" id='Secondes1'> </div><div class="EmptySwitch"> </div><br>
</body>
</html>