BS網頁中實現一個進度條progressBar
阿新 • • 發佈：2019-01-03
早上看到了Eclipse的幫助頁面 有一個不錯的進度條,所以很感興趣.右鍵看了一下,原來就是用了個div的樣式,然後非同步請求進度處理資訊.把處理的進度資訊實時反應到頁面上.
原理明白了.程式碼很簡單.2個頁面.一個負責顯示,一個是非同步處理頁面.
1.progressBar.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();String basePath = request.getScheme()
%> <!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<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'); } } elseif (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物件例項."); returnfalse; } 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=" "; } elseif((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:directi