标签：
使用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>
标签：
原文地址：http://www.cnblogs.com/duelsol/p/4299944.html
