javascript进度条实现

最新推荐文章于 2024-07-18 10:24:18 发布

weixin_30654583

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/caifenglin/p/7850546.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>测试进度条</title>
 7         <style>
 8             div#loadbar {
 9                 width: 300px;
10                 background-color: lavender;
11                 #border: 1px solid fuchsia;
12                 text-align: center;
13                 border-radius: 5px;
14             }
15 
16             #bar {
17                 display: block;
18                 font-family: arial;
19                 font-size: 12px;
20                 background-color: red;
21                 text-align: center;
22                 padding: 5px 0px;
23                 border-radius: 5px;
24             }
25         </style>
26         <script type="text/javascript">
27             var i = 0;
28             function startbar() {
29                 var showbar = setInterval("setbar()", 1000);
30             }
31 
32             function setbar() {
33                 console.log("setbar");
34                 i += 20;
35                 if(i > 100) {
36                     clearInterval(showbar);
37                 }
38                 document.getElementById("bar").style.width = i + "%";
39                 document.getElementById("bar").innerHTML = i + "%";
40             }
41             startbar();
42         </script>
43     </head>
44 
45     <body>
46         <div id="loadbar">
47             <span id="bar" style="width: 0%;">20%</span>
48         </div>
49     </body>
50 
51 </html>

转载于:https://www.cnblogs.com/caifenglin/p/7850546.html

weixin_30654583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript进度条实现

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>测试进度条</title> 7 <style> 8 ...
复制链接

扫一扫