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="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>
