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

本文介绍了如何在循环中更改进度条？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有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进度栏也是！