如何在循环中更改进度条？ [英] How to change progress bar in loop?

问题描述

我有HTML代码。我需要一些javascript代码用于每次迭代的更新值

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
}

我尝试这样做：

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

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

But this not work. It update progress bar when loop finish.

推荐答案

我会像虚拟进度条那样做：

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

您可以使用 JQueryUI进度栏也是！

这篇关于如何在循环中更改进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！