js實現進度條

 <script language="javascript" type="text/javascript">
    var progressEnd = 16;
    var progressColor="blue";   
    var progressInterval=350;
    var progressBegin = 0;
    var progressTimer;     
    function lonkto()
    {
        //
       document.getElementById("frameDiv").style.visibility = "visible";
       //
       progress_update();
    }   
   
     function   progress_update()
    {
        progressBegin++;
        if(progressBegin>progressEnd)
            {
                progress_clear(progressTimer);
            }  
           else
           {
                document.getElementById("progress"+progressBegin).style.backgroundColor= progressColor;
                progressTimer = setTimeout("progress_update()",progressInterval);
           }
    }    
 
        function  progress_clear()
            {
                clearTimeout();
                document.getElementById("frameDiv").style.visibility = "hidden";
           }
  </script> 

 

<div>
    <input id="btn1" type="button" onclick="lonkto()" value="連接" />
  <div id="frameDiv" class="divbody"  >
        <br />
       <p>正在連接站點，請稍候...</p>
       <table style="padding-left:100px;">
            <tr>
                <td>
                        <div class="divprogress">
                             <span id="progress1">&nbsp;&nbsp;</span>
                             <span id="progress2">&nbsp;&nbsp;</span>
                             <span id="progress3">&nbsp;&nbsp;</span>
                             <span id="progress4">&nbsp;&nbsp;</span>
                             <span id="progress5">&nbsp;&nbsp;</span>     
                             <span id="progress6">&nbsp;&nbsp;</span>
                             <span id="progress7">&nbsp;&nbsp;</span>
                             <span id="progress8">&nbsp;&nbsp;</span>
                             <span id="progress9">&nbsp;&nbsp;</span>
                             <span id="progress10">&nbsp;&nbsp;</span>
                             <span id="progress11">&nbsp;&nbsp;</span>
                             <span id="progress12">&nbsp;&nbsp;</span>
                             <span id="progress13">&nbsp;&nbsp;</span>
                             <span id="progress14">&nbsp;&nbsp;</span>
                             <span id="progress15">&nbsp;&nbsp;</span>
                             <span id="progress16">&nbsp;&nbsp;</span>
                        </div> 
                </td>
            </tr>
       </table>
  </div>
    </div>