Exercice 13a - 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 :

// 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.