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!
