进度条效果 

 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>

 

 

posted @ 2016-12-14 18:21  黄力军  阅读(182)  评论(0)    收藏  举报