js进度条

<!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>
<style>
#loading{
width:500px;
height:40px;
border:1px solid blue;
margin:100px auto 0 auto;
text-align:center;
line-height:40px;
background:#FFCCFF;
}
#in{
height:40px;
width:0px;
margin:0px;
background:#CCFFCC;
float:left;
text-align:center;
}
#txt{
width:500px;
height:25px;
margin:0 auto 0 auto;
text-align:center;
}
</style>

</body>
</head><body>
<div id="loading">
<div id="in" style="width:0px"></div>
</div>
<div id="txt"></div>
<script>
var str = 0;
var sty=document.getElementById("in").style.width;
//alert(sty);
function myload(){
str = str + 10;
if (str>=110)
{
alert("加载完成！");
return false;
}
document.getElementById("txt").innerHTML =  str + "%";
sty = parseInt(sty)+50;
document.getElementById("in").style.width=sty.toString() + "px";
setTimeout("myload()",500);
}
myload();
</script>
</html>这是我写的js进度条，有两点问题，一、怎么使那个 % 放在框框里面。二、代码太长了，又没有简单速度快的代码？

解决方案 »

  1.   

    <!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>
    <style>
    #loading{
    width:500px;
    height:40px;
    border:1px solid blue;
    margin:100px auto 0 auto;
    text-align:center;
    line-height:40px;
    background:#FFCCFF;
    position:relative;
    }
    #in{
    height:40px;
    width:0px;
    margin:0px;
    background:#CCFFCC;
    float:left;
    text-align:center;
    }
    #txt{
    position:absolute;
    left:250px;
    top:10px;
    margin:0 auto 0 auto;
    text-align:center;
    }
    </style></body>
    </head><body>
    <div id="loading">
    <div id="txt">dd</div>
    <div id="in" style="width:0px"></div>
    </div> <script>
    var str = 0;
    var sty=document.getElementById("in").style.width;
    //alert(sty);
    function myload(){ 
    str = str + 1;
    if (str>=101)
    {
    alert("加载完成");
    return false;
    }
    document.getElementById("txt").innerHTML = str + "%";
    sty = parseInt(sty)+5;
    document.getElementById("in").style.width=sty.toString() + "px";
    setTimeout("myload()",50); 
    }
    myload();
    </script>
    </html>