jQuery执行进度提示窗口的实现

浏览数：185 / 时间：2015年06月09日

使用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>