Aujourd’hui, j’ai décidé de m’attaquer à la version gloubi d’un script que j’ai également déjà créé de mon côté : l’horloge illustrée.
La version gloubi est visible ici, tandis que la création de ma propre version, faite avec jQuery, est présentée ici.
Présentation de la version gloubi
Pour commencer, on créé 10 objets de type Image() en leur attribuant à chacun l’attribut src correspondant.
c1=new Image(); c1.src="c1.gif";
c2=new Image(); c2.src="c2.gif";
c3=new Image(); c3.src="c3.gif";
c4=new Image(); c4.src="c4.gif";
c5=new Image(); c5.src="c5.gif";
c6=new Image(); c6.src="c6.gif";
c7=new Image(); c7.src="c7.gif";
c8=new Image(); c8.src="c8.gif";
c9=new Image(); c9.src="c9.gif";
c0=new Image(); c0.src="c0.gif";
Vient ensuite la fonction affiche(), permettant de changer les images, qui prend 3 paramètres en entrée : le nombre d’heures, le nombre de minutes et le nombre de seconde. Pour chacun des trois paramètres on détermine l’image à afficher pour les dizaines et les unités. Chaque image est modifiée en passant par la propriété images de l’objet document.
function affiche(h,m,s){
if (h<=9){
document.images.a.src=c0.src
document.images.b.src=eval("c"+h+".src")
}
else {
document.images.a.src=eval("c"+Math.floor(h/10)+".src")
document.images.b.src=eval("c"+(h%10)+".src")
}
if (m<=9){
document.images.d.src=c0.src
document.images.e.src=eval("c"+m+".src")
}
else {
document.images.d.src=eval("c"+Math.floor(m/10)+".src")
document.images.e.src=eval("c"+(m%10)+".src")
}
if (s<=9){
document.images.g.src=c0.src
document.images.h.src=eval("c"+s+".src")
}
else {
document.images.g.src=eval("c"+Math.floor(s/10)+".src")
document.images.h.src=eval("c"+(s%10)+".src")
}
}
La dernière fonction, heure(), quant-à elle récupère les heures, minutes et secondes, puis fait appel à affiche(). Elle s’appelle ensuite récursivement après un timeout de 1 seconde. Le premier appel à cette fonction est assuré par l’événement onLoad de l’élément <body> de la page.
function heure(){
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
affiche(hours,minutes,seconds)
setTimeout("heure()",1000)
}
Mon remake
Première différence par rapport à ma première version, le HTML utilisé pour afficher les nombres ainsi que les sous-titres. Chaque colonne est une div contenant 2 images ainsi qu’une autre div pour le sous-titre. Ces trois div sont contenu dans une div englobante.
<div id="clock">
<div class="clock-digits">
<img id="hd" src="/assets/files/images/0.gif"/>
<img id="hu" src="/assets/files/images/0.gif"/>
<div>Heures</div>
</div>
<div class="clock-digits">
<img id="md" src="/assets/files/images/0.gif"/>
<img id="mu" src="/assets/files/images/0.gif"/>
<div>Minutes</div>
</div>
<div class="clock-digits">
<img id="sd" src="/assets/files/images/0.gif"/>
<img id="su" src="/assets/files/images/0.gif"/>
<div>Secondes</div>
</div>
</div>
Cette div englobante est mise en affichage flexbox, et les div de sous-titre centrent leur texte.
<style type="text/css">
#clock {
width: 476px;
display: flex;
}
.clock-digits > div {
text-align: center;
}
</style>
Concernant le JS, j’ai décidé d’un peu optimiser le code présenté sur gloubi web. En effet, dans ce code, pour chacune des composantes (heures, minutes, secondes) on fait exactement les mêmes opérations, les seules différences étant la valeur utilisée et les images à modifier.
Mon nouveau code se présente sous la forme d’une unique fonction displayTime().
Première étape, on stocke l’heure dans une constante.
const date = new Date();
Ensuite, je créé un tableau d’objets pour les composantes de l’heure. Chacun de ces objets a 3 propriétés : une valeur (value), l’id de l’image des dizaines (dozen) et l’id de l’image des unités (unit).
let digits = [
{value : date.getHours(), dozen: 'hd', unit: 'hu'},
{value : date.getMinutes(), dozen: 'md', unit: 'mu'},
{value : date.getSeconds(), dozen: 'sd', unit: 'su'}
];
On parcours ce tableau, et pour chacune de ses entrées, on détermine l’image à utiliser pour les dizaines et unités. Pour les dizaines, si la valeur est inférieur ou égale à 9, on affiche directement le zéro, sinon on utilise le résultat arrondi vers le bas de la division par 10 de la valeur. Pour les unités, on utilise le reste (modulo) de la division par 10 de la valeur.
digits.forEach((digit) => {
if(digit.value <= 9) {
document.images[digit.dozen].src = '/assets/files/images/0.gif';
} else {
document.images[digit.dozen].src = `/assets/files/images/${Math.floor(digit.value/10)}.gif`;
}
document.images[digit.unit].src = `/assets/files/images/${digit.value%10}.gif`;
});
La fonction s’appelle ensuite récursivement après un timeout de 1 seconde.
setTimeout(displayTime, 1000);
Le premier appel de cette fonction est assuré par l’événement load de la fenêtre.
window.addEventListener('load', () => {
displayTime();
});
Et voilà. Vous avez tout ce qu’il vous faut pour créer l’horloge illustrée de vos rêves.
La version finale est visible sur cette page.
À bientôt pour d’autres articles à haute teneur informative 👋