进度条的制作

最新推荐文章于 2024-10-10 15:22:58 发布

欧阳之城

最新推荐文章于 2024-10-10 15:22:58 发布

阅读量872

点赞数

分类专栏：学习到新知识文章标签：进度条

本文链接：https://blog.youkuaiyun.com/oyyz111/article/details/22940657

版权

学习到新知识专栏收录该内容

24 篇文章

订阅专栏

效果如图所示：

分析如图所示：

整个进度条是由三张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' ><font size="2">
			        正在进行保存，用时较长，请稍后...
			        </font>
			       </td>
			      </tr>
			      <tr>
			        <td id='tdOne' height='25' width=1 bgcolor="blue"> </td>
			        <td id='tdTwo' height='25' width=500 bgColor='#999999'> </td>
			      </tr>
			    </table>
	          </td>
	        </tr>
	    </table>
	    </td>
	  </tr>
	</table>

在第一个table的样式display:none是不显示的，所以在刚开始的界面整个进度条是不显示的，如图所示：

JS的代码如下：

<script type="text/javascript">
function save(){
	document.form1.action="system/testajax_progress.do";
	document.form1.submit();
	loading();//提交后调用进度条的代码
}
var speed = 1 ;
var len = 500 ;   //整条长度
var add = 0 ;
function openContenFrame(){
    var td1 = document.getElementById('tdOne') ;//获取进度条的那两列
    var td2 = document.getElementById('tdTwo') ;//获取进度条的那两列
    add = add+10 ;//每次增加10 即前进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("load2").style.display="none"; //隐藏其他表格的代码
    openContenFrame();
}
</script>

整个progress.jsp页面的的代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'progress.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
function save(){
	document.form1.action="system/testajax_progress.do";
	document.form1.submit();
	loading();
}
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("load2").style.display="none";
    openContenFrame();
}
</script>
  </head>
  
  <body>
<form action="" method="POST" name="form1" >
<table id="load2" border="1" width="200" height="300">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>2</td><td>6</td></tr>
</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' ><font size="2">
			        正在进行保存，用时较长，请稍后...
			        </font>
			       </td>
			      </tr>
			      <tr>
			        <td id='tdOne' height='25' width=1 bgcolor="blue"> </td>
			        <td id='tdTwo' height='25' width=500 bgColor='#999999'> </td>
			      </tr>
			    </table>
	          </td>
	        </tr>
	    </table>
	    </td>
	  </tr>
	</table>
	<input type="button" value="submit" οnclick="save()">
	</form>
  </body>
</html>