文档章节

Java实现进度条开发过程

问题达人
 问题达人
发布于 2016/04/01 15:53
字数 739
阅读 216
收藏 6

首先说流程: 
    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");
    }
}

© 著作权归作者所有

问题达人
粉丝 14
博文 94
码字总数 87078
作品 0
昌平
程序员
私信 提问
JAVA 进度条

Java实现进度条开发过程

宛珩国际
2014/12/10
10
1
Kotlin入门(20)几种常见的对话框

提醒对话框 手机上的App极大地方便了人们的生活,很多业务只需用户拇指一点即可轻松办理,然而这也带来了一定的风险,因为有时候用户并非真的想这么做,只是不小心点了一下而已,如果App不做...

aqi00
2018/09/27
0
0
PHP监控后台程序 生成进度条

// 这里的页面采用ajax轮询的方式 php获取java生成进度条文件。 //后台处理采用java 生成进度条文件。 后台监控如下: 启用了3个线程 几乎把服务器给榨干了。 [root@localhost wcms]# ps -e...

大灰狼wow
2014/04/10
1K
0
为Struts2 应用程序创建进度条(等待页面)

对于一些需要较长时间才能完成的任务,在Web开发中,会由HTTP协议会因为超时而断开而面临许多风险,这是在桌面开发不曾遇到的。Struts 2提供的execAndWait拦截器就是为了处理和应付这种情况而...

Java编程思想
2014/01/04
301
0
多线程批量静态化 java与php【原创】

需求描述:现在网站的数量达到了3万多篇,全站都是静态化的,然而有时候改了网站的导航,问题大了。怎么办?跑php?单线程造成了我不得不停下其他工作,只为了跑脚本。而且中间可能会遇到错误...

大灰狼wow
2014/04/09
313
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部