进度条

zht1933 · 发表于 2013-2-7 22:44:00

<div class="blog_content">
<html>
<head>
<style type="text/css">
.graph{
    width:450px;
    border:1px solid #F8B3D0;
    height:25px;
}

#bar{
    display:block;
    background:#FFE7F4;
    float:left;
    height:100%;
    text-align:center;
}
</style>

<script type="text/javascript">
function $(obj){
    return document.getElementById(obj);
}

function go(){
    //判断总数据进度百分比
    //当大于当前进度条宽度时，改变当前进度条宽度

    //设置进度条值
    $("bar").style.width = parseInt($("bar").style.width) + 1 + "%";
    $("bar").innerHTML = $("bar").style.width; //设置进度条显示值

    //判断是否到达进度条总值
    if($("bar").style.width == "100%"){
        window.clearInterval(bar); //结束进度条
    }
}

//每隔50毫秒调用一次
var bar = window.setInterval("go()",50); //开始进度条
</script>
</head>

<body>

<div class="graph"><strong id="bar" style="width:1%;"></strong></div>

</body>
</html>

		自动登录	找回密码
密码			立即注册

进度条

浏览过的版块