js实现简单进度条


    主要用到的 offsetWidth 属性，定时器。

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5      <title>进度条 </title>    
 6    </head>
 7    <style>
 8      #progress{
 9        position: relative;
10        margin: auto;
11        top: 200px;
12        display: block;
13        width: 200px;
14        height: 20px;
15        border-style: dotted;
16        border-width: thin;
17        border-color: darkgreen;
18       }
19     #filldiv{
20       position:absolute;
21       top: 0px;
22       left: 0px;
23       width: 0px;
24       height: 20px;
25       background: blue;
26     }
27    #percent{
28       position: absolute;
29       top: 0px;
30       left: 200px;    
31     }
32     </style>
33 <body>
34     <div id="progress">
35         <div id="filldiv"></div>
36         <span id="percent">0</span>
37     </div>
38 </body>
39 </html>
40      <script type="text/javascript">
41      //获取所有需要的元素
42      var progress = document.getElementById("progress");
43      var filldiv = document.getElementById("filldiv");
44      var percent = document.getElementById("percent");
45 
46      var w = progress.clientWidth;//获取整个进度条的长度
47 
48      //开启一个定时器
49      var timer = setInterval(function(){
50      //filldiv的宽度递增
51      //filldiv.offsetWidth，每一次获取的都是当前的宽
52      filldiv.style.width = filldiv.offsetWidth + 1 + "px";
53      //filldiv添加一个随机背景颜色 
54      filldiv.style.background = getColor();
55      //percent统计百分比
56      percent.innerHTML = parseInt((filldiv.offsetWidth/w)*100) + "%";
57      //当filldiv的宽到了200的宽就停止定时器
58      if(filldiv.offsetWidth == w){
59      clearInterval(timer);//当进度达到100%时，关闭定时器，进度停止。
60       }
61      },10);
62 
63      //获取十六进制的随机颜色值
64      function getColor(){
65      var str = "0123456789abcdef";
66      var color = "#";
67      var rand;
68      //str有下标 0-15
69      //获取0-15的随机数
70      //通过这个随机数作为str的下标，
71      //获取随机字符
72      //获取六个随机字符拼成一个字符串
73      for(var i = 0 ; i < 6 ;i++){
74      rand = getRand(0,15);
75      color += str.charAt(rand);
76      }
77        return color;
78      }
79 
80      //获取min-max之间的随机整数
81      function getRand(min,max){
82      return parseInt(Math.random() * (max - min + 1) + min);
83      }
84 
85 </script>


运行效果：

**可以将 getColor() 和 getRand() 函数放入一个公共的JS库，下次使用时可以直接调用。

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/leizige/p/11331620.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 14:16:38
阅读 ( 768 )
分类：前端

js实现简单进度条

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看