JS实现动态进度条步骤分析

来源：测品娱乐

这次给大家带来JS实现动态进度条步骤分析，JS实现动态进度条的注意事项有哪些，下面就是实战案例，一起来看一下。

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

JS实现动态进度条步骤分析