Comment implémenter la barre de progression en javascript

La barre de progression est un composant courant de l'interface utilisateur, généralement utilisé pour afficher la progression d'une tâche ou d'une opération. Dans de nombreuses applications Web, les barres de progression sont indispensables, permettant aux utilisateurs de mieux comprendre la progression de la tâche en cours, améliorant ainsi l'expérience utilisateur. Cet article explique comment implémenter une barre de progression à l'aide de JavaScript.

1. Utilisez HTML et CSS pour créer une barre de progression de base
En HTML, vous pouvez utiliser l'élément En définissant un attribut value et un attribut max sur l'élément, vous pouvez déterminer le degré d'achèvement de la barre de progression. Par exemple, en supposant que nous devons créer une barre de progression avec une valeur maximale de 100 et que le niveau d'achèvement actuel est de 50, nous pouvons l'écrire comme ceci :

<progress value="50" max="100"></progress>

Ensuite, nous devons utiliser des styles CSS pour embellir la barre de progression. Vous pouvez définir une couleur d'arrière-plan pour l'élément , ainsi qu'un pseudo-élément pour simuler la progression de la barre de progression. Par exemple, le style suivant définit la hauteur de la barre de progression sur 20 pixels, la couleur d'arrière-plan sur gris clair et la couleur de progression sur vert foncé :

progress {
  height: 20px;
  background-color: #f5f5f5;
}

progress::-webkit-progress-value {
  background-color: #2ecc71;
}

Le pseudo-élément ::-webkit- progress est utilisé ici -value pour spécifier la couleur de la barre de progression. Dans les applications réelles, d'autres styles peuvent également être personnalisés en fonction des besoins réels.

2. Utilisez JavaScript pour contrôler l'achèvement de la barre de progression
Vous pouvez créer une barre de progression de base via la méthode ci-dessus, mais l'achèvement de la barre de progression est statique et ne peut pas être ajusté dynamiquement . Ensuite, nous utiliserons JavaScript pour contrôler l'achèvement de la barre de progression.

Tout d'abord, nous devons obtenir une référence à l'élément et créer une variable globale pour enregistrer la valeur actuelle de la barre de progression. Par exemple, en supposant que l'identifiant de notre barre de progression est "progressbar", nous pouvons l'écrire comme ceci :

let progressbar = document.getElementById("progressbar");
let progress = 0;

Ensuite, nous pouvons écrire une fonction pour contrôler l'achèvement de la barre de progression. Cette fonction peut recevoir un paramètre indiquant l'incrément de la barre de progression. Chaque fois que cette fonction est appelée, le degré d'achèvement de la barre de progression sera modifié en fonction de l'incrément transmis et la valeur de la barre de progression sera mise à jour. Par exemple, le code suivant augmentera de 10% la complétion de la barre de progression :

function updateProgress(increment) {
  progress += increment;
  progressbar.value = progress;
}

Pour tester cette fonction, on peut ajouter un bouton au HTML et appeler la fonction updateProgress() dans son clic événement . Par exemple, le code suivant augmentera le degré d'achèvement de la barre de progression de 20 % :

<button onclick="updateProgress(20)">增加进度</button>

Ensuite, nous pouvons ajouter une logique pour contrôler dynamiquement le degré d'achèvement de la barre de progression. Par exemple, nous pouvons écrire une minuterie pour augmenter automatiquement et périodiquement l'achèvement de la barre de progression. Par exemple, le code suivant augmentera le degré d'achèvement de la barre de progression de 5 % toutes les 1 seconde :

setInterval(function() {
  updateProgress(5);
}, 1000);

3. Combiné avec les requêtes AJAX pour mettre à jour la barre de progression
Dans le scénario actuel , la barre de progression Généralement utilisée pour afficher la progression des opérations asynchrones. Par exemple, des opérations telles que le téléchargement d'un fichier et l'envoi de données au serveur prennent un certain temps, et une barre de progression doit être affichée pour indiquer à l'utilisateur la progression en cours. Dans ces cas, nous devons combiner une requête AJAX pour mettre à jour la barre de progression.

En prenant le téléchargement de fichiers comme exemple, nous pouvons télécharger des fichiers via des requêtes AJAX et transmettre la progression du téléchargement en tant que paramètre dans la fonction updateProgress(). Par exemple, le code suivant crée une requête AJAX pour télécharger un fichier :

function uploadFile(file) {
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload");
  xhr.upload.addEventListener("progress", function(event) {
    let percent = (event.loaded / event.total) * 100;
    updateProgress(percent);
  });
  xhr.send(file);
}

Dans cette méthode, nous créons une requête POST via l'objet XMLHttpRequest et transmettons le fichier en tant que paramètre. Au cours du processus de demande, nous avons ajouté un écouteur d'événement de progression pour surveiller la progression du téléchargement et avons transmis la progression en tant que paramètre dans la fonction updateProgress() pour mettre à jour la barre de progression.

En combinaison avec les méthodes ci-dessus, nous pouvons mettre à jour dynamiquement la barre de progression en fonction de la progression des opérations asynchrones, obtenant ainsi une meilleure expérience utilisateur.

Résumé :
Cet article présente comment implémenter une barre de progression à l'aide de JavaScript. Tout d’abord, nous pouvons créer une barre de progression de base en utilisant HTML et CSS. Ensuite, nous pouvons utiliser JavaScript pour contrôler dynamiquement l'achèvement de la barre de progression. Enfin, nous combinons les requêtes AJAX pour mettre à jour la barre de progression afin d'obtenir une meilleure expérience utilisateur. Les méthodes ci-dessus peuvent être utilisées dans de nombreuses applications Web pour aider les utilisateurs à mieux comprendre la progression des tâches et à améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!