裝置資源管理系統-進度條

標籤：style   color   使用   strong   width   檔案   

裝置資源管理系統-進度條

進度條的使用：

    1、上傳、下載的時候，可以使用進度條

    2、檔案的匯入和匯出的時候，可以使用進度條

    3、對於大批量資料的操作的時候，可以使用進度條

    4、對於資料的遠程操作的時候，可以使用進度條

步驟：

    1、在系統代辦事宜中添加進度條

    2、代碼

       <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">

   <tr>

     <td><br><br>

     <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">

         <tr bgcolor="#F7F7F6">

           <td width="20%" height="100" valign="middle">

       <table align=‘center‘ width=‘500‘>

         <tr>

          <td colspan=‘2‘ align=‘center‘ ><font size="2">

           進行中儲存，用時較長，請稍後...

           </font>

          </td>

         </tr>

         <tr>

           <td id=‘tdOne‘ height=‘25‘ width=1 bgcolor="blue">&nbsp;</td>

           <td id=‘tdTwo‘ height=‘25‘ width=400 bgColor=‘#999999‘>&nbsp;</td>

         </tr>

       </table>

           </td>

         </tr>

     </table>

     </td>

   </tr>

 </table>

 放入到actingIndex.jsp的form1中

    3、複製js到actingIndex.jsp中：

    　　　var speed = 1 ;

 　　　　var len = 500 ;

 　　　　var add = 0 ;

 　　　　function openContenFrame(){

     　　　　var td1 = document.getElementById(‘tdOne‘) ;

     　　　　var td2 = document.getElementById(‘tdTwo‘) ;

     　　　　add = add+10 ;

     　　　　td1.width = add ;

     　　　　if(len - add <= 0){

        　　　　td2.width = 1 ;

     　　　　}else{

        　　　　　　td2.width = len - add ;

     　　　　　　}

     　　　　if(add<=len) {;

     　　　　}else{

        　　　　td1.width = 1 ;

        　　　　td2.width = 500 ;

        　　　　add = 0 ;

     　　　　}

     　　　　setTimeout(‘openContenFrame()‘,100) ;

 }

 function loading(){

     　　　　document.getElementById("load").style.display="";

     　　　　document.getElementById("opperate").style.display="none";

     　　　　openContenFrame();

 }

    4、在執行儲存的js的方法中，添加執行loading()的操作

    5、修改頁面的已有table屬性的id值，設定id=“operate1”和id=“operate2”

    6、修改loading()的方法

   function loading(){

     document.getElementById("load").style.display="";

     document.getElementById("operate1").style.display="none";

     document.getElementById("operate2").style.display="none";

     openContenFrame();

 }