`
zht1933
  • 浏览: 218777 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

进度条

JavaScriptCSSGoHTML 
阅读更多


<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>

分享到：
| StAX解析XML
评论
1 楼 xuliuliu 2012-09-25  
为什么宽度为0的时候进度条不走呢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics