当前位置：首页 > news >正文

进度条工具类

news 来源：原创 2024/5/18 6:28:44

2019独角兽企业重金招聘Python工程师标准>>>

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>progressbar</title>
<style type="text/css">
   #divprogressbar{
    width:300px;
    height:30px;
   }
   
   .progress-label{
    float:left;
    margin-left:40%;
    margin-top:3px;
   }
</style>
<link  rel="stylesheet" href="${pageContext.request.contextPath}/resources/js/jquery/jquery-ui.css"  media="screen"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/jquery-ui.js"></script>
 
</head>
<body>
 
<div id="divprogressbar"><div class="progress-label">loading...</div></div>
 
<script type="text/javascript">
$(function(){
 
    //  var val=0;
    $('#divprogressbar').progressbar({value:0});
    $('#divprogressbar').progressbar({
        value:0,
        change:function(){
            $(".progress-label").text($("#divprogressbar").progressbar("value")+"%");
        },
        complete:function(){
            $(".progress-label").text("Complete!");
        }
     });
       
    function progress(){
        var val= $('#divprogressbar').progressbar("value") || 0;
        val = 99;
           $('#divprogressbar').progressbar("option", "value", val+1);
           
           if(val<99) {
            setTimeout(progress, 50);
           }
    }
 
    setTimeout(progress, 1000);
    
});
</script>
</body>
</html>

进度条实现：

<%@ page language="java" pageEncoding="UTF-8"%>
<html>

<head>
<link  rel="stylesheet" href="${pageContext.request.contextPath}/resources/js/jquery/jquery-ui.css"  media="screen"/>
<style type="text/css">
   #divprogressbar{
    width:300px;
    height:30px;
   }
   
   .progress-label{
    float:left;
    margin-left:40%;
    margin-top:3px;
   }
</style>
</head>

<body>
<h2>欢迎，${subject.principal}！<a href="${pageContext.request.contextPath}/logout.do">退出</a></h2>
<br>

<form action="" name="executeForm" method="post">
    <table>
        <tr>
            <td>
                日期
            </td>
            <td>
                <input class="Wdate" name="date" id="date" value="${date}" type="text" onClick="WdatePicker()">
            </td>
            <td>
                <input type="button" id="buttton_submit" value="提交" onclick="_submit()">
            </td>
        </tr>
    </table>
</form>
<div id="execute_result"></div>

<div id="divprogressbar" style="display: none"><div class="progress-label">loading...</div></div>

<%-- <a href="${pageContext.request.contextPath}/progressbar.jsp">进度条</a> --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/jquery-1.8.0.min.js"></script>
<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/resources/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/jquery-ui.js"></script>

<script type="text/javascript">
function _submit() {
    $('#divprogressbar').css("display", "none");
    $('#execute_result').html("");
    $.ajax({
        type: "post",
        cache: false,
        url: "${pageContext.request.contextPath}/executeIncrJson.do",
            
        data : {'date':$("#date").val()},
                  
        beforeSend: function(XMLHttpRequest){
            //alert("请求将要开始,我们可以在此处显示加载条");
        },
          
        success: function(data, textStatus){
            //alert("请求成功执行了");
            if(data == 'fail') {
                $("#execute_result").html("日期格式错误...");    
            } else {    
                //如果总记录数大于0
                if(parseInt(data, 10) > 0) {
                    showProcess();
                } else {
                    $("#execute_result").html("<font color='red'>总记录数："+parseInt(data, 10) + "，执行完成</font>");
                }
            }
        },
          
        complete: function(XMLHttpRequest, textStatus){
            //alert("请求完毕了,我们可以隐藏加载条 ");
        },
         
        error: function(XMLHttpRequest){
            alert("请求失败了   "+XMLHttpRequest.status);
        }
    });
}

var proData;
function getProcessData() {
    var data = null;
    $.ajax({
        type: "post",
        cache: false,
        async: false,
        url: "${pageContext.request.contextPath}/process.do",
        data : {},
        success: function(data){
            proData = data;
        },
        error: function(XMLHttpRequest){
            alert("请求失败了   "+XMLHttpRequest.status);
        }
    });    
    
    return proData;
}

$(function(){
    $('#divprogressbar').progressbar({value:0});
    $('#divprogressbar').progressbar({
        value:0,
        change:function(){
            $(".progress-label").text($("#divprogressbar").progressbar("value")+"%");
        },
        complete:function(){
            $(".progress-label").text("Complete!");
        }
    });
})

//showProcess();

function progress(){
    var data = getProcessData();
    var val = data.process;
       $('#divprogressbar').progressbar("option", "value", val);
       
       if(data.totalRows > 0) {
           $("#execute_result").html("<font color='red'>总记录数："+data.totalRows + "，当前执行记录：" + data.curRow +"</font>");
       }
       
       if(val<100) {
        setTimeout(progress, 2000);
       }
}

function showProcess() {
    $('#divprogressbar').css("display", "");
    setTimeout(progress, 1000);
};

</script>

</body>
</html>

转载于:https://my.oschina.net/sniperLi/blog/662322