[jQuery] Une horloge sous forme de diagramme

Avant de m’essayer à l’horloge présentée dans l’article précédent, je m’était posé la question de trouver une forme plus originale d’afficher l’heure. Après quelques recherches et essai, je suis arrivé à ce résultat.

Le but de cet article est de vous expliquer le code que j’ai utilisé.

Structure d’une barre: une division contenante, masquant une division colorée qui sert de curseur.

Voyons tout d’abord le calcul des crans d’incrémentation pour chaque barre :

// Formule utilisée pour chaque barre: hauteur maximum/nombre de valeurs prises par le digit
 
// Dizaines d'heure
var hdnotch = 100 / 2;
// Unités d'heure
var hunotch = 100 / 9;

// Dizaines de minute
var mdnotch = 100 / 5;
// Unités de minute
var munotch = 100 / 9;

// Dizaines de seconde
var sdnotch = 100 / 5;
// Unités de seconde
var sunotch = 100 / 9;

Ensuite, la récupération de l’heure se déroule de la même manière que pour l’horloge en images:

//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 - su)/10;

//Traitement des minutes
var mu = minutes%10;
var md = (minutes%100 - su)/10;

//Traitement des secondes
var su = seconds%10;
var sd = (seconds%100 - su)/10;

Le positionnement des barres est assuré en appliquant à chaque division curseur une marge « top » correspondant à: hauteur de la div contenante – (cran*valeur du digit).

$('#hd').css({'top':100-(hdnotch*hd)});
$('#hu').css({'top':100-(hunotch*hu)});
$('#md').css({'top':100-(mdnotch*md)});
$('#mu').css({'top':100-(munotch*mu)});
$('#sd').css({'top':100-(sdnotch*sd)});
$('#su').css({'top':100-(sunotch*su)});

Ces deux morceaux de codes (la récupération des heures, et le positionnement des barres) sont exécutés au chargement de la page, et toutes les secondes, à l’aide de

setInterval(function(){ }, 1000);

J’espère que cet article vous aura été aussi intéressant que les précédents, et vous dit à bientôt !

Laisser un commentaire