Introduction
La balise HTML <progress> est utilisée pour indiquer l'avancement d'une tâche. Elle est généralement utilisée pour afficher une barre de progression pour une tâche dans une page web HTML. Dans ce laboratoire, vous allez apprendre à créer une barre de progression de base à l'aide de la balise HTML <progress>.
Note: Vous pouvez pratiquer la programmation dans
index.htmlet apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.
Créer la structure HTML
Tout d'abord, créez la structure HTML de base pour la barre de progression à l'aide du code suivant dans le fichier index.html :
<!doctype html>
<html>
<head>
<title>HTML Progress Tag Example</title>
</head>
<body>
<h1>HTML Progress Tag</h1>
<label for="progress-bar">Task Progress:</label>
<progress id="progress-bar" max="100"></progress>
</body>
</html>
Dans ce code, nous avons inclus les balises nécessaires pour créer une page HTML, une balise de titre pour le titre de la page, une balise d'étiquette pour décrire notre barre de progression et la balise <progress> avec un attribut id de "progress-bar" et un attribut max de 100.
Définir la valeur de la barre de progression
Pour définir la valeur de la barre de progression, ajoutez l'attribut value à la balise de progression avec une valeur comprise entre 0 et 100. Par exemple, pour définir la barre de progression à 50 %, ajoutez le code suivant après la balise <progress> :
<progress id="progress-bar" max="100" value="50"></progress>
Ajout de JavaScript pour mettre à jour la barre de progression
Pour mettre à jour dynamiquement la barre de progression, nous allons ajouter du JavaScript pour modifier l'attribut value de la balise de progression.
Ajoutez le code JavaScript suivant au fichier HTML :
<script>
let progressBar = document.getElementById("progress-bar");
let percent = 0;
function updateProgress() {
if (percent == 100) {
clearInterval(intervalId);
return;
}
progressBar.value = percent;
percent++;
}
let intervalId = setInterval(updateProgress, 100);
</script>
Dans ce code, nous avons créé une fonction appelée updateProgress() qui met à jour la valeur de la barre de progression toutes les 100 millisecondes. La fonction vérifie si la barre de progression est à 100 % et arrête l'intervalle si c'est le cas.
Enfin, nous définissons l'intervalle en appelant setInterval() avec notre fonction updateProgress() et un intervalle de temps de 100 millisecondes.
Enregistrez le fichier index.html et ouvrez-le dans un navigateur web. Vous devriez maintenant voir une barre de progression dont la valeur augmente au fil du temps jusqu'à ce qu'elle atteigne 100 %.
Résumé
En suivant les étapes ci-dessus, vous avez appris à créer une barre de progression de base à l'aide de la balise <progress> en HTML. De plus, vous avez appris à mettre à jour dynamiquement la barre de progression à l'aide de JavaScript. Cette technique peut être utile pour afficher l'avancement d'une tâche longue durée ou pour indiquer l'avancement d'un téléchargement de fichier.
