还是有人问的“军哥,看你视频里面做的进度条 都不显示百分之几的数字,怎么样才能加上呢”?好吧,确实 我之前录制了一篇“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)
在线运行效果请点击这里查看>>>>>