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

　2009-06-30 05:17:00　来源：WEB开发网　　　

核心提示：第一种方式，函数式：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

第一种方式，函数式：
<!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.cncms.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>