首页 > 代码库 > java实现进度条开发过程

java实现进度条开发过程

首先说流程:
    1.访问启动任务servlet
    2.启动任务servlet开启任务,并跳转掉进度条展示页面
    3.页面就绪就调用(进度参数获取servlet),此后进度条展示页面定时调用,直到传递过来为100%.
    4.获取参数servlet从session中取出任务,并获取任务中的进度参数.返回进度参数给进度展示页面.

一下是各个文件代码,工程为web工程。

1.进度条schedule.css文件:

body {
    margin:0;
    padding:0;
    font-family:"宋体";
    font-size:12px;
    line-height:1.8em;
    color:#392b60;
    height:100%;
    }
/*最外层的div样式*/
.progressOutside {
    border:red 1px dotted; /*边框1像素的红色虚线*/
    width:350px; /*宽度是350像素*/
    position:relative; /*相对body位置*/
    margin-left:-175px; /*整个div宽度是350,-175px就是向右移动了175像素.正好居中.*/
    left:50%; /*左边框距浏览器左边框是屏幕的一半.*/
    margin-top:150px; /*上边框相对于body顶部35%*/
}
/*标题div样式*/
.progressTitle {
    border:greenyellow 1px solid;
    line-height:30px; /*设置行高
    padding:0 15px 0; /*内填充 上:0, 右:15像素, 下:0*/
}
/*内容div样式*/
.progressContent {
    border:purple 1px double;
    padding:15px;
    height:40px !important;
}
/*进度条框*/
.progress {
    background:#f0f4f9 url(../imgs/2.gif) repeat-x top;
    border:yellow 2px solid;
    height:15px;
    margin:10px 0 0 0 !important; margin:35px 0 0 0;
}
/*进度条实体*/
.progressSchedule {
    border:red 1px double;
    background:url(../imgs/1.gif) repeat-x left top;
    width:3%;
    height:15px;
}
/*进度提示框*/
.progressPercent {
    text-align:center;
    border:green 1px solid;
    height:15px;
    position:absolute;
    display:block;
    left:125px;
    margin-top:-17px;
    width:100px;
}
/*百分比提示框*/
.textProgress {
    border:orange 1px solid;
    font-weight:bold;
    font-family:tohama;
}

 

2.页面文件invoke.jsp 用到了jquery.

<html>
    <head>
        <link href=http://www.mamicode.com/"css/schedule.css" rel="stylesheet" type="text/css">> 

3.用到的ajax get.js文件

$(document).ready(function(){
getPercent();
});
function getPercent(){
    $.post("process",{userName:‘ab‘},function(data){
            styleId.style.width=data;
            $("#bfb").text(data);
            if(data!=‘100%‘){
                window.setTimeout(getPercent,100);
            }else{
                if(confirm("Finished?")){
                window.location.href=http://www.mamicode.com/"/servlet1/index.html";> 

4.启动线程servlet Index.java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Progress p = (Progress) request.getSession().getAttribute("progress");
    if(p!=null){
        System.out.println("Thread Running!");
        throw new RuntimeException("线程被占用!");
    }else{
        Progress progress = new Progress();
        request.getSession().setAttribute("progress", progress);
        progress.start();
    }
    response.sendRedirect(request.getContextPath()+"/invoke.jsp");
}

5.线程任务类-->要做的任务写在这个里面Progress.java

public class Progress extends Thread{
    Logger logger = Logger.getLogger(Process.class);
    //Getter方法省略
    private String percent = "";
    //Getter方法省略
    private boolean over = false;
    public void run(){
        for(int i=1;i<=100;i++){
            try {
            Thread.sleep(1*100);
            } catch (InterruptedException e) {
            e.printStackTrace();
            }
            percent = i+"%";
        }
        if(logger.isDebugEnabled()){
            logger.debug("thread run over!");
        }
        over = true;
    }
}

6.取参数servlet-->此servlet是要被页面定时的调用,Process.java
被调用时,会取出当前任务线程,获取当前任务线程中的进度参数,同时将进度参数传到页面.

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Progress p = (Progress) request.getSession().getAttribute("progress");
    if (p!=null) {
        String percent = p.getPercent();
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(percent);
    }
    if(p.isOver()){
        request.getSession().removeAttribute("progress");
    }
}