JavaScript-进度条

Posted on 2017-12-08 15:27  神笔码农  阅读(124)  评论(0)  编辑  收藏  举报 
<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:100%; height:30px}
#box{ width:300px; height:30px; border:1px solid #000; margin-top:100px}
#jindu{ width:0%; height:30px; background-color:#F00; margin-left:0px} 
</style>
</head>

<body>
    <div id="wai">
        <div id="box">
            <div id="jindu"></div>
        </div>
    </div>
    <input type="button" value="点击开始" id="btn" />
</body>
<script type="text/javascript">
    var bfb = 0;
    var ids;
    //给“btn”添加点击事件，点击它时“jindu”的宽度每个50毫秒加1%（setInterval）
    var btn = document.getElementById("btn");
    btn.onclick = function(){
         ids = window.setInterval("jia()",50);
    }
    //把"加1%"定义成一个方法
    function jia(){
        if(bfb<100){
            bfb++;
        }else{
            window.clearInterval("ids"); //当宽度到100时，clearinterval
        }
        var jd = document.getElementById("jindu");
        jd.style.width = bfb+"%";
    }
</script>