Comment créer une horloge numérique à l'aide de HTML, CSS et JavaScript

L'horloge numérique fait partie des meilleurs projets pour débutants en JavaScript. Il est assez facile à apprendre pour les personnes de tout niveau de compétence.

Dans cet article, vous apprendrez à créer votre propre horloge numérique en utilisant HTML, CSS et JavaScript. Vous obtiendrez une expérience pratique de divers concepts JavaScript tels que la création de variables, l'utilisation de fonctions, l'utilisation de dates, l'accès et l'ajout de propriétés au DOM, etc.

Commençons.

Composants de l'horloge numérique

L'horloge numérique comporte quatre parties: heure, minute, seconde et méridiem.

Structure des dossiers du projet d'horloge numérique

Créez un dossier racine contenant les fichiers HTML, CSS et JavaScript. Vous pouvez nommer les fichiers comme vous le souhaitez. Ici, le dossier racine est nommé Horloge digitale. Selon la convention de nommage standard, les fichiers HTML, CSS et JavaScript sont nommés index.html, styles.css, et script.js respectivement.

Ajouter une structure à l'horloge numérique à l'aide de HTML

Ouvrez le index.html fichier et collez le code suivant:

Voici un div est créé avec un identifiant de horloge digitale. Ce div est utilisé pour afficher l'horloge numérique en utilisant JavaScript. styles.css est une page CSS externe et est liée à la page HTML à l'aide d'un étiqueter. De même, script.js est une page JS externe et est liée à la page HTML en utilisant le <scénario> étiqueter.

Ajout de fonctionnalités à l'horloge numérique à l'aide de JavaScript

Ouvrez le script.js fichier et collez le code suivant:

fonction Heure() {
// Création de l'objet de la classe Date
var date = new Date();
// Obtenir l'heure actuelle
var heure = date.getHours();
// Obtenir la minute actuelle
var minute = date.getMinutes();
// Récupère la seconde actuelle
var seconde = date.getSeconds();
// Variable pour stocker AM/PM
var période = "";
// Attribution AM/PM selon l'heure courante
si (heure >= 12) {
période = "PM" ;
} autre {
point = "AM" ;
}
// Conversion de l'heure au format 12 heures
si (heure == 0) {
heure = 12 ;
} autre {
si (heure > 12) {
heure = heure - 12 ;
}
}
// Mise à jour de l'heure, des minutes et des secondes
// s'ils sont inférieurs à 10
heure = mise à jour (heure);
minute = mise à jour (minute);
seconde = mise à jour (seconde);
// Ajout d'éléments de temps au div
document.getElementById("digital-clock").innerText = heure + ": " + minute + ": " + seconde + " " + point ;
// Réglez la minuterie sur 1 s (1000 ms)
setTimeout (Heure, 1000);
}
// Fonction pour mettre à jour les éléments de temps s'ils sont inférieurs à 10
// Ajoute 0 avant les éléments temporels s'ils sont inférieurs à 10
fonction mise à jour (t) {
si (t < 10) {
renvoie "0" + t;
}
autre {
retourner t;
}
}
Temps();

Comprendre le code JavaScript

le Temps() et mettre à jour() sont utilisées pour ajouter des fonctionnalités à l'horloge numérique.

Obtention des éléments d'heure actuelle

Pour obtenir la date et l'heure actuelles, vous devez créer un objet Date. Voici la syntaxe pour créer un objet Date en JavaScript:

var date = new Date();

La date et l'heure actuelles seront stockées dans le Date variable. Vous devez maintenant extraire l'heure, la minute et la seconde actuelles de l'objet date.

date.getHours(), date.getMinutes(), et date.getSeconds() sont utilisés pour obtenir respectivement l'heure, la minute et la seconde à partir de l'objet date. Tous les éléments de temps sont stockés dans des variables séparées pour d'autres opérations.

var heure = date.getHours();
var minute = date.getMinutes();
var seconde = date.getSeconds();

Attribution du méridien actuel (AM/PM)

Étant donné que l'horloge numérique est au format 12 heures, vous devez attribuer le méridien approprié en fonction de l'heure actuelle. Si l'heure courante est supérieure ou égale à 12, alors le méridiem est PM (Post Meridiem) sinon, c'est AM (Ante Meridiem).

var période = "";
si (heure >= 12) {
période = "PM" ;
} autre {
point = "AM" ;
}

Conversion de l'heure actuelle au format 12 heures

Vous devez maintenant convertir l'heure actuelle au format 12 heures. Si l'heure courante est 0, alors l'heure courante est mise à jour à 12 (selon le format 12 heures). De plus, si l'heure actuelle est supérieure à 12, elle est réduite de 12 pour qu'elle reste alignée sur le format de 12 heures.

En rapport: Comment désactiver la sélection de texte, couper, copier, coller et faire un clic droit sur une page Web

si (heure == 0) {
heure = 12 ;
} autre {
si (heure > 12) {
heure = heure - 12 ;
}
}

Mise à jour des éléments de temps

Vous devez mettre à jour les éléments de temps s'ils sont inférieurs à 10 (chiffre unique). 0 est ajouté à tous les éléments de temps à un chiffre (heure, minute, seconde).

heure = mise à jour (heure);
minute = mise à jour (minute);
seconde = mise à jour (seconde);
fonction mise à jour (t) {
si (t < 10) {
renvoie "0" + t;
}
autre {
retourner t;
}
}

Ajout des éléments de temps au DOM

Tout d'abord, le DOM est accessible en utilisant l'identifiant de la div cible (horloge digitale). Ensuite, les éléments de temps sont affectés au div à l'aide de la texteinterne setter.

document.getElementById("digital-clock").innerText = heure + ": " + minute + ": " + seconde + " " + point ;

Mise à jour de l'horloge toutes les secondes

L'horloge est mise à jour toutes les secondes à l'aide du setTimeout() méthode en JavaScript.

setTimeout (Heure, 1000);

Styliser l'horloge numérique à l'aide de CSS

Ouvrez le styles.css fichier et collez le code suivant:

En rapport: Comment utiliser CSS box-shadow: astuces et exemples

/* Importation de la police Google Open Sans Condensed */
@import url(' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=swap');
#horloge digitale {
couleur d'arrière-plan: #66ffff ;
largeur: 35 % ;
marge: automatique ;
rembourrage haut: 50px ;
rembourrage en bas: 50px ;
font-family: 'Open Sans Condensed', sans-serif ;
taille de la police: 64 px ;
text-align: centre ;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19) ;
}

Le CSS ci-dessus est utilisé pour styliser l'horloge numérique. Ici, la police Open Sans Condensed est utilisée pour afficher le texte de l'horloge. Il est importé des polices Google en utilisant @importer. le #horloge digitale id selector est utilisé pour sélectionner la div cible. Le sélecteur d'identifiant utilise le identifiant attribut d'un élément HTML pour sélectionner un élément spécifique.

En rapport: Exemples de code CSS simples que vous pouvez apprendre en 10 minutes

Si vous souhaitez consulter le code source complet utilisé dans cet article, voici le Dépôt GitHub. De plus, si vous souhaitez jeter un œil à la version en direct de ce projet, vous pouvez la consulter via Pages GitHub.

Noter: Le code utilisé dans cet article est MIT sous licence.

Développer d'autres projets JavaScript

Si vous êtes débutant en JavaScript et que vous voulez être un bon développeur Web, vous devez créer de bons projets basés sur JavaScript. Ils peuvent ajouter de la valeur à votre CV ainsi qu'à votre carrière.

Vous pouvez essayer des projets comme Calculator, un jeu Hangman, Tic Tac Toe, une application météo JavaScript, une page de destination interactive, un outil de conversion de poids, des ciseaux à papier, etc.

Si vous recherchez votre prochain projet basé sur JavaScript, une simple calculatrice est un excellent choix.

Comment créer une calculatrice simple à l'aide de HTML, CSS et JavaScript

Un code simple et calculé est la voie à suivre lors de la programmation. Découvrez comment créer votre propre calculatrice en HTML, CSS et JS.

Lire la suite

A propos de l'auteur