动态显示进度条

来源：互联网发布：淘宝网电脑下载安装编辑：程序博客网时间：2024/06/06 06:52

截图效果：

动态显示进度条 - lishirong - The CTO of LiShirong

视频效果：

在进度条中，每一个格子都是一个对象，通过控制每个对象的背景色来模拟任务完成的进度。通过定期向服务器端发送请求来获得一个改变值的参数，其实也许可以在客户端进行这样一个工作，有待尝试。

静态页面：progressBar.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ajax进度条实例</title>

var xmlHttp;

var key;

var bar_color="green";//设置进度条颜色

var span_id="block";

var clear="   "

function createXMLHttpRequest(){

if(window.ActiveXObject){

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

}else if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();

}

function go(){

createXMLHttpRequest();

checkDiv();

var url="servlet/ProgressBarServlet?task=create";

var button=document.getElementById("go");

button.disabled=true;

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=goCallback;

xmlHttp.send(null);

}

function goCallback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

setTimeout("pollServer()",1000);

}

function pollServer(){

createXMLHttpRequest();

var url="servlet/ProgressBarServlet?task=poll&key="+key;

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=pollCallback;

xmlHttp.send(null);

}

function pollCallback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

var percent_complete=xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;

var index=processResult(percent_complete);

for(var i=1;i<=index;i++){

var elem=document.getElementById("block"+i);

elem.innerHTML=clear;

elem.style.backgroundColor=bar_color;

var next_cell=i+1;

if(next_cell>index&&next_cell<=9){

document.getElementById("block"+next_cell).innerHTML

=percent_complete+"%";

}

if(index<9){

setTimeout("pollServer()",1000);

}else{

document.getElementById("complete").innerHTML="加载完成!";

document.getElementById("go").disabled=false;

}

function processResult(percent_complete){

var ind;

if(percent_complete.length==1){

ind=1;

}else if(percent_complete.length==2){

ind=percent_complete.substring(0,1);

}else{

ind=9;

}

return ind;

}

function checkDiv(){

var progress_bar=document.getElementById("progressBar");

if(progress_bar.style.visibility=="visible"){

clearBar();

document.getElementById("complete").innerHTML="";

}else{

progress_bar.style.visibility="visible";

}

function clearBar(){

for(var i=1;i<10;i++){

var elem=document.getElementById("block"+i);

elem.innerHTML=clear;//clear的初始值为三个空格

elem.style.backgroundColor="#CCFFFF";

}

</script>

</head>

<h1>Ajax 进度条示例</h1>

加载进度条:

<p/>

<tbody>

</div>

</td></tr>

</tbody>

</table>

</body>

</html>

服务器端Servlet：ProgressBarServlet.java

package servlet;

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class ProgressBarServlet extends HttpServlet {

private int counter=1;

public void doGet(HttpServletRequest req, HttpServletResponse res)

throws ServletException, IOException {

String task=req.getParameter("task");

String res1="";

if(task.equals("create")){

res1="<key>1</key>";

counter=1;

}else{

String percent="";

switch(counter){

case 1: percent="10";break;

case 2: percent="23";break;

case 3: percent="35";break;

case 4: percent="51";break;

case 5: percent="64";break;

case 6: percent="73";break;

case 7: percent="89";break;

case 8: percent="100";break;

}

counter++;

res1="<percent>"+percent+"</percent>";

}

PrintWriter out = res.getWriter();

res.setContentType("text/xml");

res.setHeader("Cache-Control", "no-cache");

out.println("<response>");

out.println(res1);

out.println("</response>");

out.close();

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

0 0