直接给代码:
/**
*返回浏览器类型(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就可以干很多事哦~