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