引入不带百分号的进度条
插入进度条的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"> </td> 16 <td id='tdTwo' height='25' width=500 bgColor='#999999'> </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之后