js实现进度条(不带百分比)

来源：互联网发布：淘宝标题优化技巧编辑：程序博客网时间：2024/06/05 08:34

1. 在要添加进度的jsp页面添加下面的代码，这个table要隐藏，进度条执行的时候再显示。备注:该table只要放在一个可以放table的位置即可。

<!-- 进度条的table,这个table标签要隐藏，进度条执行的时候再显示 -->    <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' id="progressPersent">                      <font size="2">正在进行保存，用时较长，请稍后...</font>                    </td>                  </tr>                  <tr>                    <td id='tdOne' height='25' width=1 bgcolor="blue">&nbsp;</td>                    <td id='tdTwo' height='25' width=500 bgColor='#999999'>&nbsp;</td>                  </tr>                </table>              </td>            </tr>          </table>        </td>      </tr>    </table>

2. 添加js代码：

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";//进度条执行的时候要关闭的table，自己看自己的页面中给其他的table加上id        openContenFrame();    }

3：在保存的submit()的方法后调用loading()方法。

//例如：<script type="text/javascript">     function checkchar(){       document.Form2.action="${pageContext.request.contextPath}/commonmsg/save.do";        document.Form2.submit();        loading();    }</script>

0 0