這篇文章主要為大家詳細介紹了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>
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
以上是JavaScript實作簡單動態進度條效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!