The main use of the property offsetWidth timer.
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 is var filldiv = document.getElementById ( " filldiv " );
44 is var Percent = document.getElementById ( " Percent " );
45
46 is var W = progress.clientWidth; // Get the entire length of the progress bar
47
48 // Open a timer
49 var timer = the setInterval ( function () {
50 // width increments filldiv
51 is // filldiv.offsetWidth, each current width are acquired
52 filldiv.style.width = filldiv.offsetWidth + . 1 + " PX " ;
53 is // filldiv add a random background color
54 is filldiv.style.background = the getColor ();
55 // Percent statistical percentage
56 is percent.innerHTML = the parseInt (( filldiv.offsetWidth / W) * 100) + "%";
57 is // when filldiv wide width of 200 to stop the timer
58 iF (filldiv.offsetWidth == W) {
59 the clearInterval (timer); // when the progress when 100%, off timer, progress stops.
60 }
61 }, 10 );
62 is
63 is // Get random color hexadecimal value
64 function the getColor () {
65 var STR = " 0123456789abcdef " ;
66 var Color = " # " ;
67 var RAND;
68 // STR has subscript 0-15
69 // Get a random number 0-15
70 // by the random number as a subscript of str,
71 // Get random character
72 // Get a six string of random characters makes up
73 is for (var I = 0 ; I < . 6 ; I ++ ) {
74 RAND = the getRand ( 0 , 15 );
75 Color + = str.charAt (RAND);
76 }
77 return Color;
78 }
79
80 // Get min- random integer between max
81 function the getRand (min, max) {
82 return the parseInt (Math.random () * (max - min + . 1 ) + min);
83 }
84
85 </ Script >
operating results:
** getColor () and getRand () function can be placed in a common JS library, you can directly call the next time.