Aller au contenu

Exercice 13 - Horloge en javascript

Comme premier exercice en javascript, on va créer une horloge digitale qui affichera la date sur une première ligne et l'heure actuelle sur une seconde.

Caractéristiques

  • La date doit être sous la forme nomDuJour aaaa-mm-dd (Vendredi 2021-10-01).
  • Le format de l'heure doit être hh:mm:ss [AM/PM] (00:31:45 AM). Vous allez devoir faire un calcul pour "ramener" l'heure sur 12 heures et afficher AM ou PM selon le cas.
  • L'horloge doit être rafraichi à toute les secondes.
  • Astuce, créez une division pour la date et une autre pour l'heure. Ensuite en javascript allez modifier le texte à l'intérieur des divisions à l'aide de innerHTML.

Notions dont vous aurez besoin

Fonctions de date

La classe Date nous permet de créer un objet qui contient la date et l'heure du système si on l'initialise sans aucun paramètre. Ensuite on peut utiliser des fonctions pour récupérer uniquement la partie de la date qu'on veut, comme l'heure par exemple.

// Récupérer la date et l'heure actuelle dans une variable
let dateActuel = new Date();
// Isoler une partie de la date ou de l'heure
let heure = dateActuel.getHours();
let mois = dateActuel.getMonth();
// Il y a des fonctions pour chaque "élément" de la date

Pour cet exercice vous pourriez récupérer chaque valeur de l'heure et de la date dans des variables distinctes. Ensuite vous pouvez les afficher ensemble en les concaténant avec le symbole +. Voici un exemple où j'aurais une variable heure, minute et seconde :

script.js
1
2
// Affiche à la console la valeur des trois variables séparée par des :
console.log(heure + ':' + minute + ':' + seconde);

Documentation : https://www.w3schools.com/jsref/jsref_obj_date.asp

Sélectionner une balise html

getElementById()

// Sélectionner un élément selon son id
let displayDate = document.getElementById('date_display');
displayDate.innerHTML = "Ma date";

querySelector

// Sélectionner un élément avec un sélecteur CSS
let displayDate = document.querySelector('#date_display');
displayDate.innerHTML = "Ma date";

Lancer une fonction de manière périodique

Comme piste de solution, regardez la fonction setInterval.

/**
 * Function qui affiche l'heure
 */
function afficheHeure() {
    // ...
}

// setInterval prend une fonction en paramêtre et un interval de temps en millisecondes.
// À chaque intervale la fonction sera appelée.
setInterval(afficheHeure, 1000);

N'oublions pas le css

  • Englobez votre horloge dans une division qui sera alignée à droite de la page (le texte sera aussi aligné à droite dans chaque division).
  • Donnez un effet de transparence à la division de l'horloge.
  • Ajoutez une image de fond à la page.

ex13_part01

Exemple de résultat

Pour aller plus loint (Optionnel)

Pour aller un peu plus loin avec notre horloge, on va ajouter une liste d'icone sur le côté gauche de la page pour offrir des options d'affichage.

Utilisation d'icones de Font Awesome

Pour les icones du menu d'options, utilisez les icones offertes par Font Awesome (https://fontawesome.com/). Dans le cadre de notre exercice, vous allez télécharger une copie des icones et les inclure dans votre projet.

Consulter la documentation à l'adresse suivante : https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself. Vous y trouverez un lien de téléchargement et la marche à suivre à la section "Using Web Fonts with CSS". Pour le choix du téléchargement, utilisez l'icône "Free For Web".

Le choix des icones est libre, vous pouvez faire une recherche sur le site de Font Awesome (avec le téléchargement vous avez accès qu'aux icones gratuites).

Comportement des icones

  • L'icone doit changer de couleur quand on la survole.
  • Le curseur de la souris doit être une "main".
  • Quand on survole l'icone, affichez une bulle de texte qui décrit l'option.
  • Quand on clique sur l'icone, la couleur de l'icone devient la même que lors de son survol. Si on clique à nouveau elle reprend sa couleur originale. (Ça va donner une sorte de On/Off).
  • Quand on clique sur l'icone, une fonction javascript est lancé pour effectué le traitement requis.

Affichage sur 24 heures

La première option nous permet de basculer l'affichage de l'heure en mode 12 heures ou 24 heures. https://fr.wikipedia.org/wiki/Syst%C3%A8me_horaire_sur_12_heures#Correspondance

ex15_part02_a

Masquer la date

La deuxième option nous permet de masquer la date du jour.

ex15_part02_b

Notes

Les options sont cumulatives, on peut masquer la date et avoir un affichage sur 24 heures.

Indices

  • En javascript, on peut "toggle" une classe sur un élément html, c'est-à-dire l'ajouter si elle n'est pas présente ou l'enlever dans le cas inverse.
// Ici "icone" est un objet qui représente l'icone qui a été cliqué
icone.classList.toggle("selected");
  • Pour la bulle d'aide, il y a plusieurs exemples de "tooltip" que vous pouvez trouver en cherchant moindrement. À vous de les adapter à vos besoins.
  • Si vous ne voulez pas "détruire" la disposition que vous aviez déjà fait de votre page avec les icones à ajouter, regardez du côté de la propriété css position: absolute;.
  • Quand on appelle une fonction javascript depuis un élément HTML, on peut "passer" cet élément en paramètre de la fonction avec this. Voir exemple plus bas
<!-- Dans votre fichier HTML -->
<button onclick="maFonction(this)"></button>

// Dans votre script
function maFonction(bouton){
    // la variable bouton contient l'élément button qui à appeler la fonction
    // on peut maintenant l'utiliser, un peut comme on la fait avec getElementById
    // Ex. Je veux changer le texte du bouton
    bouton.innerHTML = "Cliquez-moi... svp";
}