我是靠谱客的博主 自信信封,这篇文章主要介绍JavaScript实现简单动态进度条效果,现在分享给大家,希望可以做个参考。

本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下

1.效果

2.源码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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实现简单动态进度条效果的全部内容,更多相关JavaScript实现简单动态进度条效果内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(129)

评论列表共有 0 条评论

立即
投稿
返回
顶部