日期:2014-05-16  浏览次数:20397 次

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>