使用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网其它相关文章！