如何更改循环中的进度条？

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

如何更改循环中的进度条？

回答

相关问题