当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现简单动态进度条效果

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

2018年04月28日  | 移动技术网IT编程  | 我要评论

奇乐电影,降央卓玛简介,江苏高速路况实时查询

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网