Java实现进度条开发过程
jopen
10年前
首先说流程:
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"); } }