本文介绍了如何在循环中更改进度条?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有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进度栏也是!
更多推荐
如何在循环中更改进度条?
发布评论