1 <style type="text/css">
2 *{ margin:0px auto; padding:0px}
3 #kuang{ width:200px; height:40px; border:2px solid #60F;}
4 #jindu{ height:40px; background-color:#F03; float:left}
5 </style>
6 </head>
7
8 <body>
9 </br></br>
10 <div id="kuang">
11 <div id="jindu" style="width:0px"></div>
12 </div>
13
14 <script type="text/javascript">
15
16 window.setTimeout("jindu()",30);
17
18 //调一下进度前进1%
19 function jindu()
20 {
21 //获取进度div的宽度
22 var div = document.getElementById("jindu");
23
24 //获取到的是字符串"0px"
25 var str = div.style.width;
26
27 //处理字符串获取数字
28 var cd = str.substr(0,str.length-2);
29
30 //判断长度是否到最大值
31 if(cd<200)
32 {
33 //将长度转为整数加2
34 var cd = parseInt(cd)+2;
35
36 //让进度的DIV长度变为cd
37 div.style.width = cd+"px";
38
39 //调用自身
40 window.setTimeout("jindu()",30);
41 }
42 }
43
44
45 </script>
46
47 </body>
