js实现动态进度条

最终效果：

  

 以下是代码解释：

1.$(#a)就是要实现进度条的那个div（关键代码）
  $(#a).progressbar({  
   width : 200,  //设置进度条宽度 默认400  
   height : 15,  //设置进度条高度 默认22  
   value : 0,   //设置进度条值 默认0  
   text : '{value}%', //设置进度条百分比模板 默认 {value}%    
  }); 
  //实现动态效果
  setInterval(function () {   
   $(#a).progressbar('setValue', $(#a).progressbar('getValue') + 1); 
  }, 10); 

 

2.在js中 for循环里 setTimeout是不和循环同步的问题

for语句不会因为有setTimeout的存在而停止，他会跳过setTimeout，setTimeout设定的是1000毫秒的延迟，而for语句执行根本用不了那么长时间所以会先执行后面的方法，然后才setTimeout中的abc();
可以使用递归来解决这个问题

function al(){  
   k++;
   if(k<recordNum+1) setTimeout(function(){al()},1000);
   abc();
} 

<script language="JavaScript">
var recordNum;
var flag = "true";
var i =0;
var j =0;
var k=0;
 function riskResult_dataset_flushDataPost(dataset){
  	    recordNum = riskResult_dataset.length;
  	    al();
}

function al(){   
   k++;
   if(k<recordNum+1) setTimeout(function(){al()},1000);
   abc();
}
  	    
function abc(){
    flag = "false";
    if(k==0){
    	flag = "false";
    }else if(k==1){
    	flag = "false";
    }else if(k==2){
    	flag = "true";
    }else if(k==3){
    	flag = "false";
    }else if(k==4){
    	flag = "true";
    }else if(k==5){
    	flag = "true";
    }
      var c = "#datagrid-row-r1-2-"+ i;
      var d = "#datagrid-row-r1-2-"+ (i-1);
      if(flag=="false"){
  	      $(d).find(".datagrid-cell-c1-opr").replaceWith("<div style='width:73px;'><img src='${contextPath}/templets/ui/themes/icons/no.png' ></div> ");
  	      $(d).find(".datagrid-cell-c1-prog").replaceWith("<div style='width:245px;'>失败</div>");
  	      $(d).attr("visiblity","visible").css("color","red");
  	  }else{
 	      $(d).find(".datagrid-cell-c1-opr").replaceWith("<div style='width:73px;'><img src='${contextPath}/templets/ui/themes/icons/ok.png' ></div> ");
 	  	  $(d).find(".datagrid-cell-c1-prog").replaceWith("<div style='width:245px;'>成功</div>");
	      $(d).attr("visiblity","visible").css("color","green");
      }
      
		//想要修改进度条的颜色去css文件中去修改	
		$(c).find(".progressbar").progressbar({		
			width : 200,		//设置进度条宽度 默认400		
			height : 15,		//设置进度条高度 默认22		
			value : 0,			//设置进度条值 默认0		
			text : '{value}%',	//设置进度条百分比模板 默认 {value}%				
		});	
		
		setInterval(function () {			
			$(c).find(".progressbar").progressbar('setValue', $(c).find(".progressbar").progressbar('getValue') + 1);	
		}, 10);	
        
        ++i;
   }

</script>