如何在循环中更改进度条？答案

【问题标题】：How to change progress bar in loop?如何在循环中更改进度条？
【发布时间】：2013-02-08 14:01:07
【问题描述】：

我有 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;

但这不起作用。循环结束时更新进度条。

【问题讨论】：

你是在使用 jquery UI 还是一些框架？
循环结束时更新进度条。 不是真的，只是太快了，无法区分每个单独的更新。 ;)
不是真的，我在循环之前尝试 progressBar.max = 10000000 并且仍然立即填充进度条
它不工作的原因在这个问题中处理：stackoverflow.com/questions/43767722/…

标签： javascript loops progress-bar

【解决方案1】：

我会为一个虚拟进度条这样做：

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！

【讨论】：

感谢@soyuka，非常有用！

【解决方案2】：

您需要像这样使用 setTimeout 编写一个异步循环：

var counter = 0;
(function asyncLoop() {

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

【讨论】：

【解决方案3】：

我为此苦苦挣扎了几天，最后把我学到的东西放到了下面这个相当简单的解决方案中，它在 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>

【讨论】：

【解决方案4】：

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

应该将属性值设置为该循环中的任何 i

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我知道这篇文章很旧，但以防万一有人需要它：

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

将根据值i更改进度值。

例如，要上传图片，您可以使用 jquery-form 库<script src="http://malsup.github.com/jquery.form.js"></script>。因此，您可以在此库的uploadProgress 函数中更新您的progress html 标记，如下所示：

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

如果你想使用progress标签并在编码上更清楚一点，请查看jquery-form here的演示并将其与上述知识混合使用。

我希望它对某人有所帮助。

【讨论】：

【解决方案7】：

注意“必须足够”的超时，它们在很大程度上取决于每台机器的速度。我发现$('progress#id').text(Math.random()) 会强制 UI 重绘。

【讨论】：