html process bar

伊苏

浏览: 111483 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css js html

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.0
			function 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 & right
				e.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 center
				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;
			}
			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" onclick="setTotalWidth()" />
		<input type="button" value="START" onclick="tout()" />
	</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 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>
			<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" onclick="setTotalWidth()" />
		<input type="button" value="START" onclick="if(100==bar.per) bar.per=0;demo()" />
	</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 feedom
				var w=document.getElementById("txtWidth").value;
				bar=new $Pbar("d1", w, false);
				//custom lblBar position
				var 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%;">
			<!--keep inner empty-->
		</div>
		<!-- set Pbar showText false, draw bar% with below span lblBar, custom x, y and style feedom -->
		<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" onclick="setTotalWidth()" />
		<input type="button" value="START" onclick="if(100==bar.per) bar.per=0;demo()" />
	</body>
</html>

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