设备资源管理系统-进度条

设备资源管理系统-进度条

进度条的使用：

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();

}

设备资源管理系统-进度条