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="<%=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文件
$(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
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");
}
} 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！