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