Exemple d'implémentation du contrôle de la barre de progression JavaScript

Dans notre article précédent, nous vous avons présenté plusieurs façons d'implémenter la barre de progression en JavaScript, ainsi que des cas d'implémentation native JavaScript de la barre de progression, nous allons donc continuer aujourd'hui pour vous présenter un exemple d'implémentation du contrôle de la barre de progression JavaScript !

Définissez d'abord un p avec un span intégré :

<p id="loadbar">
<span id="bar"  style="width: 10%;">10%</span>
</p>

Ensuite, utilisez CSS pour compléter le style de la barre de progression :

	p#loadbar{
				width:300px;
				background-color: silver;
				border:1px solid salmon;
				text-align: center;
				border-radius:8px ;
			}
			#bar{
				display: block;
				font-family: arial;
				font-size: 12px;
				background-color: sandybrown;
				text-align: center;
				padding: 5px;
				border-radius:5px ;
				 
			}

Enfin, utilisez js pour contrôler l'affichage de la barre de progression :

		var i=0; 
			function startbar(){
				var showbar=setInterval("setbar()",1000);
			}
			function setbar(){
				console.log("setbar");
				i+=5;
				if(i>=100)
				{ 
					clearInterval(showbar);
			    }
				document.getElementById("bar").style.width=i+"%";
				document.getElementById("bar").innerHTML=i+"%";
			}
			
			startbar();

L'effet est le suivant :

Résumé :

Après en étudiant cet article, me croyez-vous ? Maintenant que vous avez une certaine compréhension de l'implémentation du contrôle de la barre de progression JavaScript, j'espère que cela vous sera utile dans votre travail !

Recommandations associées :

Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScript

Code natif JavaScript pour implémenter la barre de progression

Le téléchargement natif JS de fichiers volumineux affiche la barre de progression du fichier de téléchargement php

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!