Comment faire une horloge digitale en css html js?

Nous savons que le javascript est un langage riche, qui peut même enregistrer l'heure dans une variable, nous savons aussi que le CSS est un langage riche aussi, pour le style, on peut même faire des nombres sans font en CSS? Le saviez-vous? Alors, dans cette article nous allons faire une horloge en html/css/js sans problème.

Faire le HTML d'une horloge digitale :

Dans cette partie, nous alloons imaginer la structure graphique d'une horloge, imaginez-vous qu'une horloge digital est composé de huit éléments, comme ceci:

• Le premier nombre des heures.
• Le deuxième nombre des heures.
• Les deux petits points qui séparent les heures des minutes.
• Le premier nombre des minutes.
• Le deuxième nombre des minutes.
• Le deux petits points qui séparent les minutes des secondes.
• Le premier nombre des secondes.
• Et enfin, le deuxième nombre des secondes.

Donc, chaque éléments dans cette liste sont des balises div HTML.

Faire le JS d'un horloge digitale :

En CSS, c'est du gâteau de faire les deux petits points, et aussi de faire les nombres, mais ce n'est pas avec le CSS qu'on va pouvoir faire animer les nombres de l'horloge.

L'idée ici, c'est d'ajouter une class via le JS à chacune des div, correspondant à leurs nombres, Exemple: si le premier nombre des heures est 5, alors une class sera ajouter à la première div des heures dont son nom sera par exemple clockNum5. si c'est 6, la class sera clockNum6, etc... Vous avez compris le principe.

Alors, commençons le difficile dès maintenant, en js, il y a la fonction getHours, getMinutes, et getSeconds, nous allons les utiliser pour avoir l'heure, les minutes, et les secondes. Le seul problème de ces fonctions est qu'il peuvent retourner un nombre à un chiffre et non deux, mais dans notre horloge digitale, 1 heure 5 minutes 3 secondes ne sera pas 1:5:3 mais, s'écrira 01:05:03, c'est pour cela que notre cerveau est là pour inventer un super nouveau algorithme.

Techniquement, notre problème survient lorsque la fonction renvois un nombre à un chiffre, mais qu'on ne veut pas un nombre un chiffre mais plutôt à deux, mais on veut à la fois que le nombre à deux chiffre ne soit pas différent au nombre à un chiffre, alors on va inventer un algorithme qui va vérifier si le nombre contient deux chiffre et si ce n'est pas le cas, il rajoute un zéro derrière celui si pour le transformer en un nombre à deux chiffres et ne pas modifier le résultat voulu.

Maintenant, pour finir le travail il faudrait faire une fonction qui se répète toutes les secondes pour réactualiser notre horloge et la mettre à l'heure.

Dans le code final nous illustrerons tout cela sans aucun problème.

Faire le CSS d'un horloge digitale :

Imaginez que chaque nombre d'une horloge digitale soient deux carrés aligné dont l'un est en haut et l'autre en bas, et que vous mettez des bordures à ces carrés pour fabriquer des nombres, c'est la même chose en HTML CSS! Voici un exemple pour bien comprendre :

See the Pen Untitled by TidyCoder (@TidyCoder) on CodePen.

Le code complet d'une horloge digitale en html/css/js :

See the Pen Animated squares composed clock by tidycoder by TidyCoder (@TidyCoder) on CodePen.