진행률 막대 도구 클래스

<%@ 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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

진행률 막대 도구 클래스

좋은 웹페이지 즐겨찾기