正文
jQuery执行进度提示窗口的实现（progressbar）
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
使用jQuery原生插件，先看效果：
主要是progressbar的更新进度以及“请稍等”后省略号、倒计时关闭的效果
如果执行单个任务的时间较长，会导致浏览器假死，一定要使用异步，代码结构要稍作调整。
<%--
Created by IntelliJ IDEA.
Author: Duelsol
Date: 2015/2/25
Time: 16:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<title>执行进度条示例</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/framework/css/blue/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/framework/css/blue/jquery-plugin.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/framework/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/framework/js/jquery-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/framework/js/jquery-plugin.js"></script>
<script type="text/javascript">
// 总执行数
var totalMission;
// 完成执行数
var completeMission;
// 具体执行任务
var bnContainer = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
// 将于X秒后关闭
var countdown; // 以下4个用于clearInterval和clearTimeout
var interval;
var timeout = [];
var finish;
var close; // 执行按钮点击事件
function importAll() {
totalMission = 10;
completeMission = 0; $("body").append("<div style='display:none' id='waitimport'><div style='padding-top: 20px'></div><div id='divProgressbar'></div><div style='text-align: center'><span id='divText' style='margin: auto'></span></div></div>");
var $alertDiv = $("#waitimport");
$alertDiv.dialog({
title: "<span id='changingtitle'>导入中，请稍等<span id='changingdot'></span></span>",
modal: true,
resizable: false,
zIndex: 99999*2
});
$alertDiv.parent().find(".ui-dialog-titlebar-close").hide();
$("#divProgressbar").progressbar(); interval = setInterval("changeDot()", 1000); alterProgressBar(bnContainer[completeMission]);
timeout.push(setTimeout("running(" + completeMission + ")", 1500));
clearTimeout(finish);
clearInterval(close);
} // 改变进度条
function alterProgressBar(text) {
$("#divText").html("正在执行" + text);
$("#divProgressbar").progressbar("option", "value", completeMission / totalMission * 100);
} function running() {
alterProgressBar(bnContainer[++completeMission]);
if (completeMission == totalMission) {
finishImport();
} else {
timeout.push(setTimeout("running(" + completeMission + ")", 1500));
}
} function finishImport() {
clearInterval(interval);
for (var i = 0; i < timeout.length; i++) {
clearTimeout(timeout[i]);
} countdown = 5;
$("#changingtitle").html("执行结束");
$("#divText").html("本窗口将于<span id='countdown'>" + countdown + "</span>秒后关闭");
finish = setTimeout('$("#waitimport").remove()', 5000);
close = setInterval('$("#countdown").html(--countdown)', 1000);
} // 省略号每秒改变事件
function changeDot() {
var changingdot = $("#changingdot");
if (changingdot.html() == "") {
changingdot.html(".");
} else if (changingdot.html() == ".") {
changingdot.html("..");
} else if (changingdot.html() == "..") {
changingdot.html("...");
} else {
changingdot.html("");
}
} function changeColor(type) {
if (type == 1) {
$("#bn_importall").css("color", "lightskyblue").css("background-color", "white");
} else {
$("#bn_importall").css("color", "white").css("background-color", "lightskyblue");
}
}
</script>
</head>
<body>
<div style="text-align: center;">
<input type="button" id="bn_importall" onclick="importAll()" onmouseover="changeColor(1)" onmouseout="changeColor(2)" value="执行"
style="width: 250px;height: 100px;cursor: pointer;font-size: 50px;color: white;margin: auto;background-color: lightskyblue;border: dashed"/>
</div>
</body>
</html>
