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

2019-11-19 14:03:19

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：Vue中使用Sortable的示例代码

下一篇：js+css实现打字效果