可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have html code. And i need some javascript code for update value on every iteration

<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.

回答1:

I would do it like that for a dummy progressbar :

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

You could use the JQueryUI Progressbar too !

回答2:

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.

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.

<!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>

回答3:

You need to write an asynchronous loop using setTimeout like this:

var counter = 0;
(function asyncLoop() {

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

回答4:

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

should set the property value to whatever i is in that loop

回答5:

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

回答6:

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.

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 progress html tag in the uploadProgress function of this library as follow:

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

See the demo of jquery-form here and mix it with the above knowledge if you want to use progress tag and be a bit more clear in coding.

I hope it helps someone.

回答7:

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.