实现要求：根据进度显示百分比。
主要用到的 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>