经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
原生JavaScript实现简单进度条
来源:今日头条  作者:cx代码军哥  时间:2019/11/8 9:57:56  对本文有异议

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

1.gif

这个效果我在原来的基础上升级了下子,比如在加载过程会显示数字的进度码,还有就是加载完成后,就来个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)

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