[JS]Horloge digitale, version sprite horizontal

Rendu de l'horloge

Je vous concède qu'il y a mieux comme design, mais on va faire avec !

Image sprite de fond

L'image, simpliste, de fond est constituée de onze « digits », de même largeur, représentant les dix chiffres plus le séparateur, ici les deux points. Sur l'image ci-dessus le gradrillage n'appartient pas à celle-ci.

Les dimensions originales de l'image étant de .

L'image de fond est redimensionnée, en CSS, en fonction de la largeur des différents éléments conteneurs.

Structure HTML

<div id="clock">
  <!-- ici viendront les 8 éléments <span> -->
</div>

Tous les éléments <span> sont construits dynamiquement, inutile donc de les mettre dans le code.

CSS appliqué

La largeur du background est fixée à 1100%, soit onze, le nombre de « digits », fois 100%, ainsi chaque background-position sera décalé simplement de 10%.

Les dimensions des éléments <span> sont à ajuster suivant la taille de l'image de fond, une simple règle de trois suffit pour calculer les bonnes dimensions à appliquer.

Dans le cas où l'on part d'une image verticale il faut inverser les valeurs en pourcentage du background-size sur conteneur <div id="clock"> et également les valeurs des background-position des éléments <span>. Voir exemple sur cette page.

L'effet de transition n'est qu'un petit plus.

Le script

Le principe repose sur l'affectation d'une classe CSS aux éléments <span>, exemple si la valeur à afficher est le « digit » 8 on affecte la classe clock_8 à l'élément correspondant, le CSS fera le reste.

Seuls les éléments affectés par un changement sont traités, les valeurs en cours étant stocké dans la variable tabValeurs, il suffit donc de comparer la valeur à afficher et celle en cours.

Le script utilise requestAnimationFrame() alors qu'un simple setInterval() serait suffisant.