jquery UI进度条或自己写的进度条都没法达到预期效果，难道js是真的无法解决这有关问题

jquery UI进度条或自己写的进度条都没法达到预期效果，难道js是真的无法解决这问题？
进度条的实现方式为div1中套1个div2(jquery ui progressbar应该也是这个方式),然后设置div2的背景色和经过计算的百分比宽度。

测试代码1的逻辑如下
progress.max = 10000
for (var i = 1 ; i <= 10000; i++)
{
  progress.value++;
}
实际效果为页面卡住，最后进度条直接显示在100%状态。

测试代码2的逻辑如下
progress.max = 10000
for (var i = 1 ; i <= 10000; i++)
{
  直接在div2显示计算的百分比文本值
}
实际效果为页面卡住，最后div2显示直接显示10000。

测试代码3的逻辑如下
progress.max = 10000
for (var i = 1 ; i <= 10000; i++)
{
  progress.value++;
  alert(i);
}
实际效果为在弹出对话框的时候，进度条没任何变化。

测试代码4的逻辑如下
progress.max = 10000
for (var i = 1 ; i <= 10000; i++)
{
  直接在div2显示计算的百分比文本值
  alert(i);
}
实际效果为在弹出对话框的时候，div2中能显示出百分比文本值。

通过上述测试，感觉js没办法实现跟cs程序一样的进度条，js没有象c#中那样的application.doevents()功能啊，不知道js高手用什么办法来处理的。



[解决办法]

探讨

for (var i = 1 ; i <= 10000; i++)
{
progress.value++;
}

[解决办法]
唉，Lz可真武断，jq是吧，下面的代码加载jquery.min.js和jquery-ui.min.js下才可运行，这个不用说的吧？

<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
<div id="progressbar" style="width:300px;height:100%;"></div>
</div>
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({value: 0});
var i=0,p_ui,max=80;
function doprogress(){
var j=i++;
$("#progressbar").progressbar("option","value",j)
if(j>max){
clearInterval(p_ui)
return;
}
}
p_ui=setInterval(function(){doprogress()},100);
})
</script>

查看更多 下一篇