在我們之前的文章中，我們為大家介紹了JavaScript實作進度條的幾種方式、以及JavaScript原生實作進度列的案例，那麼我們今天就繼續給大家介紹JavaScript進度條控件實作的範例！
先定義一個p內嵌一個span:
<p id="loadbar"> <span id="bar" style="width: 10%;">10%</span> </p>
然後使用css完成進度條的樣式：
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 ;
}最後用js控制進度條顯示：
#
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();效果如下：
##總結：
#透過對本文的學習相信小夥伴麼你對JavaScript進度條控制項實作有了一定的了解、希望對你的工作有幫助！相關推薦：
以上是JavaScript進度條控制項實作的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
