在我們之前我們為大家介紹了JavaScript實作進度條的方法，原生實作進度條，那麼如何控制進度條？ JS控制進度條用到的元素比較簡單，就一個p標籤內嵌一個span標籤即可，外面那層p做背景，內部那層span做動態進度顯示，由JS控制。
整體程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS控制进度条</title>
<style type="text/css">
body
{
height:30px;
width:330px;
background-color:blue;
}
#ProgressBarBackgroundOne
{
background:url(ProgressBk.png) no-repeat 0 center;
height:10px;
width:300px;
}
#ProgressBarOne
{
background:url(ProgressFt.png) no-repeat 0 center;
height:10px;
width:0%;
display:block;
}
#ProgressBarBackgroundTwo
{
background-color:White;
height:10px;
width:300px;
}
#ProgressBarTwo
{
background-color:Gray;
height:10px;
width:0%;
display:block;
}
</style>
<script type="text/javascript">
var numOne = 0;
var numTwo = 0;
function SetProgressOne() {
var ProgressOne = document.getElementById('ProgressBarOne');
if (numOne < 100) {
numOne = numOne + 1;
}
ProgressOne.setAttribute('style', 'width:' + numOne + '%');
setTimeout(SetProgressOne, 500);
}
function SetProgressTwo() {
var ProgressTwo = document.getElementById('ProgressBarTwo');
if (numTwo < 100) {
numTwo = numTwo + 1;
}
ProgressTwo.setAttribute('style', 'width:' + numTwo + '%');
setTimeout(SetProgressTwo, 500);
}
</script>
</head>
<body>
<p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p>
<p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p>
</body>
<script type="text/javascript">
SetProgressOne();
SetProgressTwo();
</script>
</html>為了方便顯示，我就直接在html文件裡把css文字和js腳本寫了出來，這是原生js控制進度條方式，另外也可以使用Node.js或mootools之類的js函式庫來寫。
SetProgressOne()是使用了圖片來進行進度顯示；SetProgressTwo()則是使用了顏色進行進度顯示，原理上都是一樣，都是透過JS控制span標籤的屬性:style="width :預設值%"即可。在表現上，使用圖片就比使用顏色好一些，因為使用顏色不好處理圓角，並不是所有瀏覽器都支援CSS的圓角屬性，以下是效果對比：
總結：
透過本文的詳細學習，相信小夥伴們對JavaScript控制進度條有了進一步的了解，希望對你的工作有所幫助！
相關推薦：
以上是JavaScript控制進度條的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
