原生JavaScript实现简单进度条

来源：今日头条　　作者：cx代码军哥　　时间：2019/11/8 9:57:56　　对本文有异议

还是有人问的“军哥，看你视频里面做的进度条都不显示百分之几的数字，怎么样才能加上呢”？好吧，确实我之前录制了一篇“js制作简单的进度条”视频，你们可以在我头条号里面找到，那个确实比较简单，其实你们也可以进行升级，而不是一味的看我教程来做，毕竟程序东西是死的，可以举一反三的，既然有网友提出来了，我就再出一篇吧，到底长什么样子，就看下面效果图了。

这个效果我在原来的基础上升级了下子，比如在加载过程会显示数字的进度码，还有就是加载完成后，就来个alert弹窗告诉我们“加载完成”了。

一，HTML代码

<div id="progresscontainer">
<div id="progress" style="width: 0%"> <span id="j">0%</span></div>
</div>

二，CSS代码

#progresscontainer{
margin:20% auto;
width: 400px;
position: relative;
display: flex;
align-items: center;
line-height: 10px;
text-align: center;
border: solid 1px green;
}
#progress{
width: 400px;
height: 10px;
background-color: #008200;
}
#j{
position: absolute;
right: -42px;
}

三，JavaScript代码

var progress=document.getElementById('progress');
var timer=setInterval(function(){
if(progress.style.width=='100%'){
clearInterval(timer);
alert('加载完成');
return;
}
else{
progress.style.width=parseInt(progress.style.width)+1+'%';
j.innerHTML=progress.style.width;
}
},80)

在线运行效果请点击这里查看>>>>>