Home-theater-designers
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.
l'appareil connecté n'est pas pris en charge par Kies 3
Commençons.
Composants de l'horloge numérique
L'horloge numérique a 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 :
Digital Clock Using JavaScript
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 la même manière, 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 :
function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();Comprendre le code JavaScript
Les 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 hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();Attribution du midi 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 period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = '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
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 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).
hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return 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 = hour + ' : ' + minute + ' : ' + second + ' ' + period;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(Time, 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
/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
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 . Les #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.
avez-vous besoin de xbox gold pour jouer à fortnite
Si vous recherchez votre prochain projet basé sur JavaScript, une simple calculatrice est un excellent choix.
Partager Partager Tweeter E-mail Comment créer une calculatrice simple à l'aide de HTML, CSS et JavaScriptUn 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 Rubriques connexes- Développement WordPress et Web
- La programmation
- HTML
- Développement web
- JavaScript
- CSS
Yuvraj est un étudiant de premier cycle en informatique à l'Université de Delhi, en Inde. Il est passionné par le développement Web Full Stack. Quand il n'écrit pas, il explore la profondeur de différentes technologies.
Plus de Yuvraj ChandraAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner