如何更改循環中的進度條？

我有html代碼。而我需要更新值一些JavaScript代碼在每個迭代上如何更改循環中的進度條？

<progress id="progressBar" max="100" value="0"></progress> 


for (i = 0; i <= 100; i ++) { 
    //update progress bar 
}

我嘗試做這樣的事情：

var progressBar = document.getElementById("progressBar"); 
progressBar.value += i;

但這行不通。循環結束時會更新進度條。

來源

2013-02-08 Taras Kravets

您是否正在使用jQuery UI或一些框架？ – soyuka 2013-02-08 14:03:30

我正在使用jQuery – 2013-02-08 14:05:19

*當循環結束時，它會更新進度條*不是，它的速度太快，無法區分每個更新。 ;） – Yoshi 2013-02-08 14:08:05

我會不喜歡它對於虛擬進度條：

Html

<div id="progress"> 
    <span class="progress-text"></span> 
    <div class="progress-bar"></div> 
</div>

的CSS

#progress { 
    position:relative; 
    width:250px; 
    height:20px; 
    border:1px solid red; 
} 

#progress .progress-bar { 
    background:blue; 
    height:20px; 
    width:0%; 
    display:inline-block; 
} 

#progress .progress-text { 
    position:absolute; 
    z-index:2; 
    right:0; 
}

JQuery的

$(document).ready(function() { 
    var progression = 0, 
    progress = setInterval(function() 
    { 
     $('#progress .progress-text').text(progression + '%'); 
     $('#progress .progress-bar').css({'width':progression+'%'}); 
     if(progression == 100) { 
      clearInterval(progress); 
      alert('done'); 
     } else 
      progression += 10; 

    }, 1000); 
});

jsFiddle

您可以使用JQueryUI Progressbar呢！

來源

2013-02-08 14:24:17 soyuka

謝謝@soyuka，非常有用！ – Eduardo 2015-09-02 14:09:29

你需要編寫使用的setTimeout這樣一個異步循環：

var counter = 0; 
(function asyncLoop() { 

    $('#progressBar').val(counter++); 
    if (counter <= 100) { 
     setTimeout(asyncLoop, 50); 
    } 
})();

來源

2013-02-08 14:06:11

$("#progressBar").prop("value",i);

應設置屬性值設置爲我無論是在循環

來源

2013-02-08 14:06:13 Wryte

$("#progressbar").progressbar({ value: i });

來源

2013-02-08 14:08:11 user2051770

我爲此奮鬥了好幾天，最後把我學到的東西放到了下面這個相當簡單的解決方案中，該解決方案在HTML頁面上放置了一個按鈕和一個進度條。

點擊按鈕後，javascript開始計數，並隨着計數的進行更新進度條。計數在按鈕定義中設置爲默認值4321，但您可以將其更改爲您選擇的任何值。

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Progress Bar Demo</title> 
<script> 
var button; 
var count; 
var countmax; 
var progressbar; 
var timerID; 

function start(max) { 
    button = document.getElementById("button"); 
    count = 0; 
    countmax = max; 
    progressbar = document.getElementById("bar"); 
    progressbar.max = countmax; 

    timerID = setInterval(function(){update()},10); 
}//end function 

function update() { 
    button.innerHTML = "Counting to " + countmax; 
    count = count + 100; 
    progressbar.value = count; 
    if (count >= countmax) { 
     clearInterval(timerID); 
     button.innerHTML = "Ready"; 
     progressbar.value = 0; 
    }//end if 
}//end function 

</script> 
</head> 

<body> 
<p> 
    <button onclick="start(4321)" id="button" style="font-size:18px;">Ready</button><br> 
    <br> 
    <progress id="bar" value="0"></progress> 
</p> 
</body> 
</html>

來源

2014-06-20 07:30:44

我知道後是舊的，但以防萬一有人需要它一些時間：

$("progress").val(i);

會改變進度值基礎上的價值i。

舉個例子，對於上傳圖片您可以使用jQuery的表單庫<script src="http://malsup.github.com/jquery.form.js"></script>。

uploadProgress: function(event, position, total, percentComplete) { 
    progressBar.val(percentComplete); 
},

見jQuery的形式here的演示，如果你想使用progress標籤，並使其與上面的知識混合：所以，你可以在這個庫如下的uploadProgress功能更新progress html標記編碼更清晰一些。

我希望它可以幫助別人。

來源

2016-03-27 19:47:49

要小心「一定夠用」的超時時間，它們高度依賴於每臺機器的速度。我發現$('progress#id').text(Math.random())強制UI重繪。

來源

2016-10-22 09:02:40 bandie

如何更改循環中的進度條？

回答

相關問題