html process bar

伊苏 · 发表于 2013-2-7 21:18:36

I try to take a processbar myself, without JQuery,
I do it one by one,

step 1
the origin code, coding hard, not sort, for read it to easy

<html><head><title></title><style></style><script>window.onload=function(){init();}var per=0;//0-100, not 0-1.0function tout(){var e=document.getElementById("pbar");e.style.visibility="visible";var lbl=document.getElementById("lblBar");var total=document.getElementById("d2").offsetWidth;var value=per*0.01*total-2;//2px for border left & righte.width=value;lbl.innerHTML=per+"%";if(per>=100)return;per+=5;setTimeout(tout, 100)}function init(){//move the label lblBar("100%") to fit processbar width, height, and centervar d1=document.getElementById("d1");var d2=document.getElementById("lblBar");var x=d1.offsetLeft, y=d1.offsetTop;d2.style.position="absolute";d2.style.left=x;d2.style.top=y;}function setTotalWidth(){var e=document.getElementById("txtWidth");var width=e.value;var d2=document.getElementById("d2");d2.style.width=width+"px";e=document.getElementById("lblBar");e.style.width=width+"px";alert(width);}</script></head><body><div id="d1" style="width: auto"><div id="d2" style="background: url('images/bg.gif'); width: 100px; height: 22px; border: 1px solid #777;"><img id="pbar" style="visibility: hidden" src="images/on.gif" width="0" height="22" /></div><label id="lblBar" style="height: 22px; width: 100px; line-height: 22px; text-align: center">0%</label></div><input id="txtWidth" type="text" value="100" /><input type="button" value="TOTAL WIDTH" /><input type="button" value="START" /></body></html>

here is result

step 2
now, begin optimize
resize gif, reduce bar-bg.gif & bar-on.gif to 1 width, separator with 2 file, not combine to 1X44px file, else the bar-on effect will be damaged
coding css style to div d2:
style="background: url('images/bar-bg.gif') repeat-x; width: 100px; height: 22px; border: 1px solid #777;"
pls note the result I want is: repeat-x 1 px gif

step 3
remove html code, encapsulate with JS
<html><head><title></title><style></style><script>(function(){var Pbar=function(id){this.per=0;var txt="<div id=\"d2\" style=\"background: url('images/bar-bg.gif') repeat-x; width: 100px; height: 22px; border: 1px solid #777;\"><img id=\"pbar\" style=\"visibility: hidden\" src=\"images/bar-on.gif\" width=\"0\" height=\"22\" /></div>\n"+"<label id=\"lblBar\" style=\"height: 22px; width: 100px; line-height: 22px; text-align: center\">0%</label>";var e=document.getElementById(id);e.innerHTML=txt;this.init();}Pbar.prototype.init=function(){var d1=document.getElementById("d1");var d2=document.getElementById("lblBar");var x=d1.offsetLeft, y=d1.offsetTop;d2.style.position="absolute";d2.style.left=x;d2.style.top=y;}Pbar.prototype.processBar=function(n){this.per+=n;var e=document.getElementById("pbar");e.style.visibility="visible";var lbl=document.getElementById("lblBar");var total=document.getElementById("d2").offsetWidth;var value=this.per*0.01*total-2;e.width=value;lbl.innerHTML=this.per+"%";if(this.per>=100)return;}window.$Pbar=Pbar;})();var bar;window.onload=function(){bar=new $Pbar("d1");}function demo(){if(bar.per>=100)return;bar.processBar(10);setTimeout(demo, 200);}</script></head><body><div id="d1"></div><input id="txtWidth" type="text" value="100" /><input type="button" value="TOTAL WIDTH" /><input type="button" value="START" /></body></html>

step 4
add dynamic width into class, and detach div, img, label to respective object.
add showText option, to show bar% text or not, because the valign present not well when it special width to the <div id="d1">
<html><head><title></title><style></style><script>(function(){var Pbar=function(id, totalWidth, showText){this.per=0;this.totalWidth=totalWidth;this.div=id+"_pbarUtil_Bg";this.bar=id+"_pbarUtil_Bar";this.showText=showText;this.barText=id+"_pbarUtil_BarText";var txt="<div id='"+this.div+"' style='background: url(\"images/bar-bg.gif\") repeat-x; width: "+this.totalWidth+"; height: 22px; border: 1px solid #777;'><img id='"+this.bar+"' style='visibility: hidden' src='images/bar-on.gif' width='0' height='22' /></div>\n";if(this.showText)txt+="<label id='"+this.barText+"' style='height: 22px; width: "+this.totalWidth+"; line-height: 22px; text-align: center'>0%</label>";var e=document.getElementById(id);e.innerHTML=txt;this.init();}Pbar.prototype.init=function(){if(!this.showText)return;var d1=document.getElementById(this.div);var d2=document.getElementById(this.barText);var x=d1.offsetLeft, y=d1.offsetTop, w=d1.offsetWidth;d2.style.position="absolute";d2.style.left=x;d2.style.top=y;d2.style.width=w;}Pbar.prototype.processBar=function(n){this.per+=n;var e=document.getElementById(this.bar);if(e.style.visibility=="hidden")e.style.visibility="visible";var total=document.getElementById(this.div).offsetWidth;var value=this.per*0.01*total-2;e.width=value;if(this.showText){var lbl=document.getElementById(this.barText);lbl.innerHTML=this.per+"%";}if(this.per>=100)return;}window.$Pbar=Pbar;})();var bar;function setTotalWidth(){//as per IE compatible, the auto bar% text can't valign middle well//so set Pbar showText false, draw bar% with below span lblBar, custom x, y and style feedomvar w=document.getElementById("txtWidth").value;bar=new $Pbar("d1", w, false);//custom lblBar positionvar d=document.getElementById("d1");var e=document.getElementById("lblBar");var x=d.offsetLeft, y=d.offsetTop;e.style.position="absolute";e.style.left=x+"px";e.style.top=y+"px";e.style.width=w;}function demo(){if(bar.per>=100)return;bar.processBar(10);var e=document.getElementById("lblBar");e.innerHTML=bar.per+"%";setTimeout(demo, 200);}</script></head><body><div><div id="d1" style="width: 60%;"></div><span id="lblBar" style="height: 22px; line-height: 22px; text-align: center">0%</span></div><br /><hr size="1" /><input id="txtWidth" type="text" value="100" /><input type="button" value="TOTAL WIDTH" /><input type="button" value="START" /></body></html>

the result in IE, FF, Chrome, looks like no bad, hoho~

		自动登录	找回密码
密码			立即注册