Java實現進度條開發過程

時間 2019-11-16

原文原文鏈接

首先說流程:
    1.訪問啓動任務servlet
    2.啓動任務servlet開啓任務,並跳轉掉進度條展現頁面
    3.頁面就緒就調用(進度參數獲取servlet),此後進度條展現頁面定時調用,直到傳遞過來爲100%.
    4.獲取參數servlet從session中取出任務,並獲取任務中的進度參數.返回進度參數給進度展現頁面. javascript

一下是各個文件代碼，工程爲web工程。 css

1.進度條schedule.css文件:
html

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. java

<html>
    <head>
        <link href="<%=basePath%>css/schedule.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="<%=basePath %>js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="<%=basePath %>js/get.js"></script>
        <title>Insert title here</title>
    </head>
    <body>
        <div class="progressOutside">
            <div class="boxTitle progressTitle" id="divName">進度條標題在此</div>
            <div class="boxContent progressContent">
                <div class="progress" id = "progress">
                    <div class="progressSchedule" style="width:0%" id="styleId"></div>
                    <div class="progressPercent">
                    完成<span class="textProgress" id="bfb"></span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

3.用到的ajax get.js文件 jquery

$(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="/servlet1/index.html";
            }
        }
    });
}

4.啓動線程servlet Index.java web

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 ajax

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");
    }
}