BS网页中实现一个进度条progressBar

来源：互联网发布：传奇盛世翅膀数据6升7 编辑：程序博客网时间：2024/05/01 18:09

早上看到了Eclipse的帮助页面有一个不错的进度条,所以很感兴趣.右键看了一下,原来就是用了个div的样式,然后异步请求进度处理信息.把处理的进度信息实时反应到页面上.

原理明白了.代码很简单.2个页面.一个负责显示,一个是异步处理页面.

1.progressBar.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" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

function refresh()

{

var nowNum=document.getElementById("nowNum").value;

progress_request_post(nowNum);

//window.location.replace("progressDo.jsp?nowNum="+nowNum);

if(nowNum<100)

setTimeout('refresh()', 500);

}

function progress_request_post(nowNum) {//初始化、指定处理函数、发送请求的函数

http_request = false;

var url='<%=basePath%>'+'progressDo.jsp?nowNum='+nowNum;

//alert("wwwwwwwwww"+encodeURI(url));

//开始初始化XMLHttpRequest对象

if(window.XMLHttpRequest) { //Mozilla 浏览器

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {//设置MiME类别

http_request.overrideMimeType('text/xml');

}

else if (window.ActiveXObject) { // IE浏览器

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

if (!http_request) { // 异常，创建对象实例失败

window.alert("不能创建XMLHttpRequest对象实例.");

return false;

}

http_request.onreadystatechange = processRequest_ok;

// 确定发送请求的方式和URL以及是否同步执行下段代码

http_request.open("POST",encodeURI(url), true);

http_request.send(null);

}

// 处理返回信息的函数

function processRequest_ok()

{

if (http_request.readyState == 4)

{ // 判断对象状态

//alert("444444444!!");

/// popinfo(1);

if (http_request.status == 200)

{ // 信息已经成功返回，开始处理信息

if((http_request.responseText)!=null&&(http_request.responseText).indexOf("false")>=0){

alert("返回失败");

//objimg.innerHTML=" ";

}

else if((http_request.responseText)!=null&&(http_request.responseText).indexOf("true")>=0){

//alert(http_request.responseText);

var index= http_request.responseText.indexOf("nowNum=");

var endIndex= http_request.responseText.indexOf("===");

if(index!=-1){

var nowNum=http_request.responseText.substring(index+7,endIndex);

//alert(nowNum);

document.getElementById("divProgress").style.width=nowNum+'px';

document.getElementById("progressValue").innerHTML=nowNum+'% 完成';

document.getElementById("nowNum").value=nowNum;

}

// alert("200!!");

}

else

{ //页面不正常

// alert("服务器错误!!");

//objimg.innerHTML=" ";

}

</script>

</head>

<TR><TD>正在建立索引...</TD></TR>

</DIV>

</TD></TR>

<TR><TD><br>对联机信息建立索引时请稍候。此过程将只发生一次。</TD></TR>

</TABLE>

</CENTER>

setTimeout('refresh()', 1000);

</script>

</body>

</html>

2.progressDo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<jsp:directive.page import="java.io.OutputStream"/>

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

int nowNum = Integer.parseInt(request.getParameter("nowNum"));

int count = 100;

Random random=new Random();

if (nowNum < 100)

nowNum += random.nextInt(10);;

if(nowNum>100)

nowNum=100;

//System.out.println("nowNum="+result);

OutputStream os=response.getOutputStream();

os.write(new String("true "+"nowNum=" + nowNum+"===").getBytes());

os.flush();

os.close();

out.clear();

out = pageContext.pushBody();

//response.getOutputStream().close();

在实际开发中可以根据需要修改第一个页面中的进度条颜色和样式.可以修改第2个页面中的对进度处理的百分比的算法返回.