js进度条的制作

来源：互联网发布：淘宝虚拟物品退款技巧编辑：程序博客网时间：2024/04/30 22:58

<html>
   <head>
       <title>js进度条的制作</title>
   </head>
   <body>
           <div style="width:300px;border:1px solid #CCC;height:25px;overflow: hidden;">
               <div id="progress_div" style="position: relative;left:0px;top:0px;height:25px;width:0px;background:blue"></div>
               <div style="position: relative;left:0px;top:-25px;font-size:12px;color:red;width:300px;line-height:25px;height:25px;text-align:center">
                   正在加载中，进度 <span id="progress_span_count">0</span>/10...
               </div>
           </div>

   </body>
</html>
<script>
   var m=0;
   function f_test(){
       if(m<11){
           if(m>0){
               f_changeDiv(m);
           }
           progress_span_count.innerHTML=m;
           setTimeout(function(){f_test()},1000);
           m++;
       }else{
           m=1;
           progress_div.style.width=0;
           f_test();
       }
   }

   var z=0;
   function f_changeDiv(m){
           if(z<30){
               progress_div.style.width=parseInt(progress_div.style.width.replace("px",""))+1;
               setTimeout(function(){f_changeDiv()},5);
               z++;
           }else{
               z=0;
           }
   }

   f_test();
</script>