JavaScript实现一个简单的进度条（有进度含百分比）

傷城~ 2021-07-24 11:14 503阅读 0赞

效果图：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{margin:0;padding:0;}
        .box{
            width: 300px;
            height:10px;
            border:1px solid #9e9e9e;
        }
        .load{
             width:0px;
             height:10px;
             background:#325976;
        }
        </style>
        </head>
        <body>
            <div style="left:40%;position:absolute;top: 20%;font-size:70px">
                <div class="box" id="div_box"><div class="load" id="load"></div></div>
                <span id='result'></span>
            </div>
        </body>
<script>
    var speed=110;
    var n=0;
    var result = document.getElementById('result');
    var load = document.getElementById('load');
    var timer = setInterval(function(){
        if(n<=100){
            n+=Math.floor(Math.round(Math.random()*(100-10)+10)/10);// 这里采用随机的两位数来模拟
            if(n>100)n=100;
            result.innerText=n+"%"; 
            load.style.width=n*3+'px';
        }else{
            clearInterval(timer);
        }
    },speed)
</script>
</html>