BS网页中实现一个进度条progressBar
Posted shaokun305
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BS网页中实现一个进度条progressBar相关的知识，希望对你有一定的参考价值。
早上看到了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
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=ISO-8859-1"
>
<
title
>
Insert title here
</
title
>
<
script
language
="javascript"
>
...
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
>
<
body
dir
="ltr"
>
<
CENTER
>
<
input
type
=hidden
name
="nowNum"
id
="nowNum"
value
=1
>
<
TABLE
BORDER
='0'
id
="progressTable"
>
<
TR
><
TD
>
正在建立索引...
</
TD
></
TR
>
<
TR
><
TD
ALIGN
='LEFT'
>
<
DIV
STYLE
='width:100px;height:16px;border:1px
solid ThreeDShadow;'
>
<
DIV
ID
='divProgress'
STYLE
='width:0px;height:100%;background-color:Highlight'
></
DIV
>
</
DIV
>
</
TD
></
TR
>
<
TR
><
TD
><
div
id
="progressValue"
>
0% 完成
</
div
></
TD
></
TR
>
<
TR
><
TD
><
br
>
对联机信息建立索引时请稍候。此过程将只发生一次。
</
TD
></
TR
>
</
TABLE
>
</
CENTER
>
<
script
language
='JavaScript'
>
...
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();
我们如何以编程方式在 Android Q OS 中实现可搜索的进度条？
Android App开发音量调节中实现拖动条和滑动条和音频管理器AudioManager讲解及实战（超详细 附源码和演示视频）