首页 > 代码库 > 设备资源管理系统-进度条
设备资源管理系统-进度条
设备资源管理系统-进度条
进度条的使用:
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"> </td>
<td id=‘tdTwo‘ height=‘25‘ width=400 bgColor=‘#999999‘> </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();
}