Heim  >  Artikel  >  Web-Frontend  >  Beispiel für die Implementierung einer JavaScript-Fortschrittsbalkensteuerung

Beispiel für die Implementierung einer JavaScript-Fortschrittsbalkensteuerung

黄舟
黄舟Original
2017-11-21 11:20:351308Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn