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

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

1.gif

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

一,HTML代码

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

二,CSS代码

  1. #progresscontainer{
  2. margin:20% auto;
  3. width: 400px;
  4. position: relative;
  5. display: flex;
  6. align-items: center;
  7. line-height: 10px;
  8. text-align: center;
  9. border: solid 1px green;
  10. }
  11. #progress{
  12. width: 400px;
  13. height: 10px;
  14. background-color: #008200;
  15. }
  16. #j{
  17. position: absolute;
  18. right: -42px;
  19. }

三,JavaScript代码

  1. var progress=document.getElementById('progress');
  2. var timer=setInterval(function(){
  3. if(progress.style.width=='100%'){
  4. clearInterval(timer);
  5. alert('加载完成');
  6. return;
  7. }
  8. else{
  9. progress.style.width=parseInt(progress.style.width)+1+'%';
  10. j.innerHTML=progress.style.width;
  11. }
  12. },80)

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号