利用js简单实现进度条功能，替换jquery progressbar

       前一段时间，要实现一个进度条的需求，但我发现项目里面用的是JQuery 1.7.3 ，而且这个页面里面已经用到了tab的JQuery UI,而且jquery引用的UI 是分好多个部分的（需要用到哪个，用哪个），但是就是没有JQuery UI-progressbar，而且我从网上找了好久，还是没有找到1,7,3,的JQuery UI-progressbar。于是我干脆从官网上下了个最新的jqueryui 完整版，替换现在页面里面的jquery ui。
 
        jquery ui不同版本一起使用，可真是冲突不断啊，但是，我最终还是搞定了，把ui 1.7.3和1.10 融合在了一起， 也顺利实现了进度条需求，初步测试也没有什么问题。但是，昨天突然有用户反映自从页面加入进度条功能后，就有 一个功能不好用了，点击链接没有反应，我一猜就是jquery ui引起冲突了。没办法自己惹的祸，自己负责呗，于是 我想着还是从网上找1.7.3的JQuery UI-progressbar吧，起初在百度里面搜了半天，也没有搜出来，后来还是利用google在jquery英文论坛上面搜了出来，于是想着赶紧把之前的1.10的 ui替换回原来的1.7.3，但是发现progressbar的语法 都变了，直接报错，调了好久，还是没有调出来。
       后来我干脆就想着自己实现一个进度条功能得了，省的再引起冲突，我想着就是利用js动态控制div和css。于是花了1个小时 终于搞定，贴出来以备后用。

<script type="text/javascript" src="jquery-1.4.4.js"></script> 


<script>
$(function(){
	var init_val=70; //初始数值，进度条和滑动块的值。
	//alert(init_val);
	var progressbar=$("#progressbar"); //设置进度条的初始值。
	progressbar.css("color","red");
	//alert(progressbar.css("color"));
	
});
</script>
0<br/>1<br/>2<br/>3<br/>
<div id="progressbar" style="width: 500px; height: 50px; color: red;background-color:blue">
	<div style="position:absolute;width:500px;height:50px;text-align:center;line-height:50px">complete 70%</div>
	<div id="progressbarValue" style="width: 10%; height: 50px; background-color: #f6a828; color:red;border-width:1px;border-top-color:red;border-style:solid"></div>
</div>
<div id="slider"></div>
<br/>0<br/>1<br/>2<br/>3<br/>

 

效果如下：

 

然后在利用js动态更新即可。

 

核心完整版如下：

 

function exportExcel()
{
		lockscree();		
		var progressbar = $("#progressbar"), progressbarValue = $("#progressbarValue"),waitinglabel = $("#waitinglabel") ,progressbarLabel=$("#progressbarLabel");
		
		waitinglabel.show();
		var maxVal=0;	
		var requestfile="";
		function initProgressBar()
		{
			setProgressBarValue(0);
		}
		function getProgressBarVlue()
		{
			var strValue=progressbarValue.html();					
			strValue=parseInt(strValue);					
			return strValue;
		}
		function setProgressBarValue(obj)
		{
			progressbarValue.html(obj+"%");
			progressbarLabel.css("width",obj+"%");
		}
		function prograssBarCompleted()
		{
			progressbarValue.html("<a href='"+path+requestfile+"' onclick='ulockscreen()' ><b>导出完毕，点击进行下载！</b></a>");	
			waitinglabel.hide();
		}
		function growUp2Val()
		{
			var currentVal=getProgressBarVlue();
			if(currentVal <maxVal)
			{
				setProgressBarValue(currentVal + 1);
				setTimeout(growUp2Val, 100);
			}else{
				
				if(currentVal < 100)
				{
					setTimeout(getProcess, 1000);
				}else if(currentVal >= 100)
				{
					prograssBarCompleted();
				}
			}
		}
		
		//如果返回值小于0，则表示失败
		function successGet(obj2)
		{ 
		 
		 obj2=obj2.substring(1,obj2.length-1);
		
		  var strValue =  obj2.split(",")[0];
		   requestfile =  obj2.split(",")[1];
		   		
		   strValue = parseInt(strValue);  
			
			if(strValue >=0)
			{
				maxVal=strValue;
				growUp2Val();	 
			}else{
				failGet();
			}
			 
		}
		function failGet()
		{ 
		  
			alert("导出失败，请刷新页面重试！");	          			
			ulockscreen();
		 }
		
		function getProcess()
		{				
			$.ajax({ 
					 type: "post",			          
					 url: path+"//exportAllNode.action", 					         
					 cache : false,
					 success: successGet,
					 error: failGet
			});
		}
		initProgressBar();
		getProcess();
						
}