[jQuery] Une horloge en image

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à !!!

2 réflexions sur « [jQuery] Une horloge en image »

  1. Ping : Une horloge sous forme de diagramme en jQuery. | Le Geek Communicant

  2. Ping : [jQuery] Une horloge sous forme de diagramme | Le Geek Communicant

Laisser un commentaire