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

【 tulaoshi.com - Web开发 】

第一种方式，函数式：
!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"  
//进度条的封装类 
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