js滚动的进度条的3种编程方式

dn001 2009-06-22 23:16:15

第一种方式，函数式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;;;;
<html xmlns="http://www.w3.org/1999/xhtml">;;;;
<head>;;;;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />;;;;
<title>无标题文档</title>;;;;
</head>;;;;

<body>;;;;
<div id="allBox" style=" width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">
<div id="sonbox" style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px"></div>;;;;
<strong style=" text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">你的经验是1000，下级是2000</strong>;;;;
</div>
<script language="javascript">
var numberwidth=0;;
var allWidth=document.getElementById("allBox").scrollWidth;;
var loadWidth=document.getElementById("sonbox").scrollWidth;;
var doScroll=window.setInterval((function(){;
numberwidth+=1;;
if(numberwidth>=((loadWidth/allWidth)*100)){;
window.clearInterval(doScroll);;
}else{;
document.getElementById("sonbox").style.width=numberwidth+"%";;
};
}),10);;
</script>

</body>;;;;
</html>

第二种方式，数组式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;;;;
<html xmlns="http://www.w3.org/1999/xhtml">;;;;
<head>;;;;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />;;;;
<title>无标题文档</title>;;;;
</head>;;;;

<body>
<div id="allBox" style=" width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">
<div style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px"></div>;;;;
<strong style=" text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">你的经验是1000，下级是2000</strong>;;;;
</div>
<script type="text/javascript">
var loading = new Object(); //定义一个图片展示的对;
loading = {;
loadWidth: 0,;
auto: "",;
speed: 10,;
spWidth:0,;

doScroll: function(dd) {;
loading.spWidth = (document.getElementById(dd).getElementsByTagName("div")[0].scrollWidth / document.getElementById(dd).scrollWidth) * 100;;
loading.auto = setInterval(function() { loading.dos(dd) }, loading.speed);
},;
dos: function(aa) {;
//alert(loading.spWidth());;
loading.loadWidth += 1;;
//document.getElementById("ggg").innerHTML=document.getElementById(aa).getElementsByTagName("div")[0].scrollWidth+"-------"+document.getElementById(aa).scrollWidth;;
if (loading.loadWidth >= loading.spWidth) {;
clearInterval(loading.auto);;
} else {;
document.getElementById(aa).getElementsByTagName("div")[0].style.width = loading.loadWidth + "%";;
};
};
};;
loading.doScroll("allBox");;
</script>
</body>;;;;
</html>

第三种方式，面向对象：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;;;;
<html xmlns="http://www.w3.org/1999/xhtml">;;;;
<head>;;;;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />;;;;
<title>无标题文档</title>;;;;
</head>;;;;

<body>
<div id="ggg"></div>
<div id="allBox" style=" width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">
<div style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px"></div>;;;;
<strong style=" text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">你的经验是1000，下级是2000</strong>;;;;
</div>
<div id="Div1" style=" width:200px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">
<div style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:100px"></div>;;;;
<strong style=" text-align:center;width:200px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">你的经验是1000，下级是2000</strong>;;;;
</div>
<script type="text/javascript">
//进度条的封装类; http://www.knowsky.com/
function loadingScroll(boxDiv,Speed){;
this.boxId=boxDiv;//外层的id;
this.scrollSpeed=Speed;//速度;
};

loadingScroll.prototype.doScroll = function() {;
var scrollWi = 0;//执行时的宽度;
var HimalayaN=document.getElementById(this.boxId).getElementsByTagName("div")[0] ;;
var HimalayaW=document.getElementById(this.boxId);;
var pointW=(HimalayaN.scrollWidth/HimalayaW.scrollWidth)*100;//原始的宽度比例;
var doScr=window.setInterval(function() {;
scrollWi += 1;;
if (scrollWi >= pointW) {;
window.clearInterval(doScr);;
} else {;
HimalayaN.style.width = scrollWi + "%";;
};
}, this.scrollSpeed);;
};
var ddddd = new loadingScroll("allBox", 10);;
var aaaaa = new loadingScroll("Div1", 10);;
ddddd.doScroll();;
aaaaa.doScroll();;
</script>

</body>;;;;
</html>

标签：编程