Heim > Artikel > Web-Frontend > Implementierung der js-Fortschrittsbalkensteuerung
Definieren Sie zunächst ein Div mit einem darin eingebetteten Span:
<div id="loadbar"> <span id="bar" style="width: 10%;">10%</span> </div>
Verwenden Sie dann CSS, um den Fortschrittsbalken zu formatieren:
div#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 den Fortschrittsbalken zu steuern Anzeige:
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();
Der Effekt ist wie folgt:
Weitere Artikel zur Implementierung der js-Fortschrittsbalkensteuerung finden Sie unter die chinesische PHP-Website!