引入不带百分号的进度条

插入进度条的html标签

 1 <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
 2       <tr>
 3         <td><br><br>
 4         <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
 5             <tr bgcolor="#F7F7F6">
 6               <td width="20%" height="100" valign="middle">
 7                 <table align='center' width='500'>
 8                   <tr>
 9                    <td colspan='2' align='center' id="progressPersent"><font size="2">
10                     正在进行保存，用时较长，请稍后...
11                     </font>
12                    </td>
13                   </tr>
14                   <tr>
15                     <td id='tdOne' height='25' width=1 bgcolor="blue">&nbsp;</td>
16                     <td id='tdTwo' height='25' width=500 bgColor='#999999'>&nbsp;</td>
17                   </tr>
18                 </table>
19               </td>
20             </tr>
21         </table>
22         </td>
23       </tr>
24     </table>

引入js
 1 var len = 500 ;
 2     var add = 0 ;
 3     function openContenFrame(){
 4         var td1 = document.getElementById('tdOne') ;
 5         var td2 = document.getElementById('tdTwo') ;
 6         add = add+10 ;
 7         td1.width = add ;
 8         if(len - add <= 0){
 9            td2.width = 1 ;
10         }else{
11            td2.width = len - add ;
12         }
13         if(add<=len) {
14            ;
15         }else{
16            td1.width = 1 ;
17            td2.width = 500 ;
18            add = 0 ;
19         }
20         setTimeout('openContenFrame()',100) ;
21     }
22     function loading(){
23         document.getElementById("load").style.display="";
24         document.getElementById("opperate1").style.display="none";
25         document.getElementById("opperate2").style.display="none";
26         openContenFrame();
27     }

注意：使用loading函数到需要的提交的action之后

 

 

posted @ 2016-01-07 14:55  小皮  阅读(622)  评论(0)  编辑  收藏  举报