Aujourd’hui, nous allons voir comment réaliser en jQuery une horloge utilisant des images, que vous pouvez voir en action ici.
Avant de commencer
Pour des raisons de practicité, nous allons utiliser les images utilisées par le compteur de Gelbooru, que j’ai rassemblées dans cette archive.
La structure HTML
Avant tout, de quoi a t-on besoin pour faire une horloge ? On a besoin de représenter: les heures, les minutes et les secondes. Ce qui amène à 3×2=6 images (il faut une image pour les dizaines, et une autre pour les unités). On peut éventuellement indiquer « heures », « minutes » et « secondes ». Ce qui nous amène donc à la structure HTML suivante:
<table style="text-align:center;">
<tr>
<td><img id="hd" src="./images/0.gif" /></td> <!-- dizaines d'heure -->
<td><img id="hu" src="./images/0.gif" /></td> <!-- unités d'heure -->
<td><img id="md" src="./images/0.gif" /></td> <!-- dizaines de minute -->
<td><img id="mu" src="./images/0.gif" /></td> <!-- unités de minute -->
<td><img id="sd" src="./images/0.gif" /></td> <!-- dizaines de seconde -->
<td><img id="su" src="./images/0.gif" /></td> <!-- unités de seconde -->
</tr>
<tr>
<td colspan="2">heures</td>
<td colspan="2">minutes</td>
<td colspan="2">secondes</td>
</tr>
</table>
Le code jQuery
Le principe derrière ce code est relativement simple: à chaque seconde, l’attribut src de chaque image est remplacé par celui correspondant au chiffre devant être affiché par l’image.
//On récupère la date
var hour = new Date().getHours();
var minutes = new Date().getMinutes();
var seconds = new Date().getSeconds();
//Traitement des heures
var hu = hour%10;
var hd = (hour%100 - hu)/10;
//Traitement des minutes
var mu = minutes%10;
var md = (minutes%100 - mu)/10;
//Traitement des secondes
var su = seconds%10;
var sd = (seconds%100 - su)/10;
//On actualise les images
$('#hd').attr('src','/assets/files/images/'+hd+'.gif');
$('#hu').attr('src','/assets/files/images/'+hu+'.gif');
$('#md').attr('src','/assets/files/images/'+md+'.gif');
$('#mu').attr('src','/assets/files/images/'+mu+'.gif');
$('#sd').attr('src','/assets/files/images/'+sd+'.gif');
$('#su').attr('src','/assets/files/images/'+su+'.gif');
setInterval(function(){
var hour = new Date().getHours();
var minutes = new Date().getMinutes();
var seconds = new Date().getSeconds();
var hu = hour%10;
var hd = (hour%100 - hu)/10;
var mu = minutes%10;
var md = (minutes%100 - mu)/10;
var su = seconds%10;
var sd = (seconds%100 - su)/10;
$('#hd').attr('src','/assets/files/images/'+hd+'.gif');
$('#hu').attr('src','/assets/files/images/'+hu+'.gif');
$('#md').attr('src','/assets/files/images/'+md+'.gif');
$('#mu').attr('src','/assets/files/images/'+mu+'.gif');
$('#sd').attr('src','/assets/files/images/'+sd+'.gif');
$('#su').attr('src','/assets/files/images/'+su+'.gif');
},1000); //Répète les mêmes actions, toutes les secondes
Et voilà !!!