JavaScript進度條控制項實作的範例

在我們之前的文章中，我們為大家介紹了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實作進度列的幾種方法介紹

#JavaScript實作進度列的原生程式碼

JS原生上傳大檔案顯示進度條-php上傳檔案

以上是JavaScript進度條控制項實作的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！