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