Beispiel für die Implementierung einer JavaScript-Fortschrittsbalkensteuerung

In unserem vorherigen Artikel haben wir Ihnen verschiedene Möglichkeiten zur Implementierung des Fortschrittsbalkens in JavaScript sowie Fälle der nativen JavaScript-Implementierung des Fortschrittsbalkens vorgestellt. Deshalb werden wir heute fortfahren um es Ihnen zu geben Lassen Sie uns ein Beispiel für die Implementierung der JavaScript-Fortschrittsbalkensteuerung vorstellen!

Definieren Sie zunächst ein p mit einem darin eingebetteten Span:

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

Vervollständigen Sie dann mit CSS den Stil des Fortschrittsbalkens:

	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 ;
				 
			}

Verwenden Sie schließlich js, um die Anzeige des Fortschrittsbalkens zu steuern:

		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();

Die Wirkung ist wie folgt:

Zusammenfassung:

Nachher Glauben Sie mir, nachdem Sie diesen Artikel gelesen haben, dass Sie jetzt ein gewisses Verständnis für die Implementierung der JavaScript-Fortschrittsbalkensteuerung haben? Ich hoffe, dass er für Ihre Arbeit hilfreich sein wird!

Verwandte Empfehlungen:

Einführung in verschiedene Methoden zur Implementierung von Fortschrittsbalken in JavaScript

Nativer JavaScript-Code zur Implementierung des Fortschrittsbalkens

Beim nativen JS-Upload großer Dateien wird der Fortschrittsbalken der PHP-Upload-Datei angezeigt

Das obige ist der detaillierte Inhalt vonBeispiel für die Implementierung einer JavaScript-Fortschrittsbalkensteuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!