JavaScript实现简单动态进度条效果

亚连原创: 2018-05-26 14:26:40 1704浏览

这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现动态进度条效果的具体代码，供大家参考，具体内容如下

1.效果

2.源码

<html>
<head>
  <script type="text/javascript">
    window.onload = function () {
      var myProgress = document.getElementById("myProgress");
      var mySpan = document.getElementById("mySpan");
      var value = myProgress.value;
      mySpan.innerText = value + "%";
      var ID = setInterval(function () {
        value = myProgress.value;
        if (value < 100) {
          value += 10;
          myProgress.value = value;
          mySpan.innerText = value + "%";
        }
        if (value == 100) {
          clearInterval(ID);
        }
      }, 500);
    }
  </script>
</head>
<body>
<label for="myProgress">进度条</label>
<progress id="myProgress" value="0" max="100"></progress>
<span id="mySpan"></span>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

利用H5特性FormData实现不刷新文件上传

各种AJAX方法的使用比较详解

浅析IE针对Ajax请求结果的缓存问题

以上就是JavaScript实现简单动态进度条效果的详细内容，更多请关注php中文网其它相关文章！

JavaScript js 进度 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Js面试中容易遇到的算法下一条：如何使用JS获取并修改input文本框数据