某同志面试,帮他写了个JS进度条。发来让大家瞅瞅:

   先看效果:

再来瞅瞅代码

 

   <HTML>
<HEAD>
     <title>测试</title>
</HEAD>
<BODY onload="process()">
  进度:
  <div id="process_f" align="left">
               <div id="process_c">&nbsp;</div>
                <div id="process_w" align="center"></div>
    </div>
   <style>
   #process_f{
     width:300px;
     border:1px dashed #FF0000;
     height:21px;
    }
   #process_c{
     float:left;
     background:#CCC;
     position:absolute;
     z-index:1;
     height:100%
    }
    #process_w{
     float:right;
     width:300px;
     z-index:2;
     position:absolute;
     }
  </style>
  <script>
   var i =0
   function $(id){
    return document.getElementById(id);
   }
      function setProcess(){
       if(i>100){
         i=0
        }
     $("process_w").innerHTML= i++ + "%"
     $("process_c").style.width= 300*(i/100) + "px"
    } 
    function process(){
          setInterval("setProcess()",100)
     }
  </script>
</BODY>
</HTML>