思路：
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，把定时放在了外层。
今天的文章JS实现简单进度条分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29138.html
