js中滚动进度条的制作

文章类别：Javascript | 发表日期:2009-8-9 9:52:49

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

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网