javascript实现自定义进度条

直接给代码：

/**
	*返回浏览器类型(ie,firefox,opera)
	*/
function getBrowser(){
	  var type = "";
	  var Browser = {
		  'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
		  'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,
		  'isOpera' : navigator.userAgent.indexOf('Opera') >= 0
	  };
	  if(Browser["isIE"]==true){type='ie'};
	  if(Browser["isFirefox"]==true){type='firefox'};
	  if(Browser["isOpera"]==true){type='opera'};
	  return type;
}

/**
	*生成静态进度条
	*@param progress	进度(例如：10/120,也可为文字:进度不正常时的提示文字)
	*@param id		进度条id
	*@param color 进度条颜色
	*/
function processBar(progress,id,color){
		var browser = getBrowser();
		var height = "";
		if(browser.toLowerCase()=='ie'){
			height = 28;
		}else if(browser.toLowerCase()=='firefox'){
			height = 24;
		}else if(browser.toLowerCase()=='opera'){
			height = 24;
		}
		var processStr = "";
 		if(parseInt(progress)<90){//进度显示放在span外
 			processStr = 
				'<div id="'+id+'" style="height:24px;text-align:left;background:white;border: 1px solid green;cursor:hand;" >'+
					'<div style="float:left;height:'+height+'px;text-align:center;background:'+color+';width:'+progress+'%;"></div>'+progress+"%"+
				'</div>';
 		}else if(parseInt(progress)>=90){//进度显示放在span中
 			processStr = 
				'<div id="'+id+'" style="height:24px;text-align:left;background:white;border: 1px solid green;cursor:hand;" >'+
					'<div style="float:left;height:'+height+'px;text-align:center;background:'+color+';width:'+progress+'%;">'+progress+"%"+'</div>'+
				'</div>';
 		}else{
   		processStr = 
				'<div id="'+id+'" style="height:24px;text-align:center;background:white;border: 1px solid green;cursor:hand;" >'+
					'<div style="float:left;height:'+height+'px;text-align:center;background:'+color+';"></div>'+progress+
				'</div>';
 		}
   	return processStr;
}

应用效果预览：

大家注意生成进度条时传入id，这个id就给了大家丰富的想象空间，有个这个id就可以干很多事哦~