Javascript 如何在循环中更改进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14774245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change progress bar in loop?
提问by Taras Kravets
I have html code. And i need some javascript code for update value on every iteration
我有html代码。我需要一些 javascript 代码来在每次迭代时更新值
<progress id="progressBar" max="100" value="0"></progress>
for (i = 0; i <= 100; i ++) {
//update progress bar
}
I try to do something like this:
我尝试做这样的事情：
var progressBar = document.getElementById("progressBar");
progressBar.value += i;
But this not work. It update progress bar when loop finish.
但这行不通。循环完成时更新进度条。
采纳答案by soyuka
I would do it like that for a dummy progressbar :
对于虚拟进度条，我会这样做：
Html
html
<div id="progress">
<span class="progress-text"></span>
<div class="progress-bar"></div>
</div>
Css
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);
});
You could use the JQueryUI Progressbartoo !
你也可以使用JQueryUI Progressbar！
回答by Roger C
You need to write an asynchronous loop using setTimeout like this:
您需要使用 setTimeout 编写一个异步循环，如下所示：
var counter = 0;
(function asyncLoop() {
$('#progressBar').val(counter++);
if (counter <= 100) {
setTimeout(asyncLoop, 50);
}
})();
回答by Allan S
I struggled with this for several days, and finally put what I had learned into the following fairly simple solution, which puts a button and a progressbar on an HTML page.
我为此苦苦挣扎了好几天，最后将我学到的东西放到了以下相当简单的解决方案中，该解决方案在 HTML 页面上放置了一个按钮和一个进度条。
When the button is clicked, javascript starts a count, and updates the progress bar as the count progresses. The count is set to a default value of 4321 in the button definition, but you can change it to any value you choose.
单击按钮时，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>
回答by Mahsa2
I know the post is old, but just in case someone needs it some time:
我知道这篇文章很旧，但以防万一有人需要它：
$("progress").val(i);
will change the progress value base on value i.
将根据 value 更改进度值i。
As an example, for uploading an image you can use the jquery-form library <script src="http://malsup.github.com/jquery.form.js"></script>. So, you can update your progresshtml tag in the uploadProgressfunction of this library as follow:
例如，要上传图像，您可以使用 jquery-form 库<script src="http://malsup.github.com/jquery.form.js"></script>。所以，你可以progress在uploadProgress这个库的函数中更新你的html 标签，如下所示：
uploadProgress: function(event, position, total, percentComplete) {
progressBar.val(percentComplete);
},
See the demo of jquery-form hereand mix it with the above knowledge if you want to use progresstag and be a bit more clear in coding.
见jQuery的形式演示在这里，如果你想使用它与上面的知识混合progress标签，是一个位编码更加清晰。
I hope it helps someone.
我希望它可以帮助某人。
回答by bandie
Beware the "must be enough" timeouts, they highly depend on each machine's speed.
I discovered that $('progress#id').text(Math.random())forces the UI to redraw.
当心“必须足够”超时，它们高度依赖于每台机器的速度。我发现这会$('progress#id').text(Math.random())强制 UI 重绘。
回答by Wryte
$("#progressBar").prop("value",i);
should set the property value to whatever i is in that loop
应该将属性值设置为该循环中的任何值
回答by user2051770
$("#progressbar").progressbar({ value: i });
