JS实现简单进度条

思路：1.定义一个外框+内部进度框+显示；2.定义i从0加到100；3.循环的i的大小作为参考修改内部框的颜色样式的宽度，记得加上px；4.显示与循环保持一致，记得加上%；5.外部考虑用定时器，每0.1秒更新一个i，不然只显示‘100%’，当i<100时，执行2、3，否则，退出当前进程。...

Lily的秋天

14948人浏览 · 2021-06-01 17:00:40

Lily的秋天 · 2021-06-01 17:00:40 发布

思路：
1.定义一个外框+内部进度框+显示；
2.定义i从0加到100；
3.循环的i的大小作为参考修改内部框的颜色样式的宽度，记得加上px；
4.显示与循环保持一致，记得加上%；
5.外部考虑用定时器，每0.1秒更新一个i，不然只显示最终的‘100%’，当i<100时，执行2、3，否则，退出当前进程。

实现效果如下：

完整代码如下：

<!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:10%;position:absolute;top: 20%;font-size:70px">
                <div class="box" id="div_box">
                    <div class="load" id="load"></div>
                </div>
                <span id='result' style=""></span>
            </div>
        </body>
<script>
    var n=0;
    var load=document.getElementById('load');
    var result=document.getElementById('result');
    var i=0;
    var timer=setInterval(function(){
            // for(i=0;i<=100;i++){
                // i+=1;
                if(i<100){
                    i+=1;
                  	load.style.width=i*3+'px';
                    result.innerText=i+'%';
                }
                if(i>=100){
                    clearInterval(timer);
                }
               console.log(i)
        // }
    },100);
 
</script>
</html>

在1-100循环那里，想使用for循环，在for里面用定时，每循环一次i+1且执行一次定时，尝试多次无果，找不出原因，哎……

最终改成了上述的i+=1，把定时放在了外层。