Heim > Artikel > Web-Frontend > 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:
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!