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

jQuery执行进度提示窗口的实现（progressbar）的更多相关文章

  1. JQuery入门——进度条

    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...

  2. jquery自定义进度条与h5原生进度条

      介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...

  3. pv命令监控Linux命令的执行进度

    pv命令监控Linux命令的执行进度 http://www.techweb.com.cn/network/system/2015-12-14/2241124.shtml yum install -y ...

  4. 通过DeveloperApi获取spark程序执行进度及异常

    在应用spark时,经常要获取任务的执行进度,可以参照jobProgressListener的设计来完成该功能. 以下代码仅供参考,欢迎交流. 效果显示: 代码: package org.apache ...

  5. 【MS SQL】查看任务执行进度

    原文:[MS SQL]查看任务执行进度 备份或还原数据库时,我一般是用MS SQL工具向导来进行,由于工具向导没有显示任务执行过程的状态, 如果数据库比较大执行时间较长的话,对任务啥时候执行完成比较迷 ...

  6. 【原创】大叔经验分享（19）spark on yarn提交任务之后执行进度总是10%

    spark 2.1.1 系统中希望监控spark on yarn任务的执行进度,但是监控过程发现提交任务之后执行进度总是10%,直到执行成功或者失败,进度会突然变为100%,很神奇, 下面看spark ...

  7. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. JQuery UI进度条——Progressbar

    1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...

  9. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

随机推荐

  1. payoneer注册充值提现海外收款费用官方解答

    从事海外贸易的朋友,会发现收款是一大难题.Paypal是老牌支付平台,但费率高昂.其实,Payoneer是新兴的收款工具,非常适合做外贸的卖家使用,提现灵活,费率低,免费注册账号后,可直接获得美国.英 ...

  2. DUIlib使用Fastreport--自定义的数据

    报表根据数据源的可以分为拉模式和推模式,拉模式就是在报表中添加数据源组件从数据库中拉取数据,我们上篇报表的简单使用就是拉模式.而推模式就是在程序中构造数据托给报表显示.这篇我们这要说的是推模式. 在程 ...

  3. TCP connect EADDRNOTAVAIL（99）错误原因分析

    转自:http://blog.chinaunix.net/uid-20662820-id-3371081.html 关于TCP connect 返回错误99,可以能大家都会遇到,这里就分析一下这个错误 ...

  4. VsVim的快捷键使用

    .插入命令(可配合数字使用) i 在当前位置前插入 I 在当前行首插入 a 在当前位置后插入 A 在当前行尾插入 o 在当前行之后插入一行 O 在当前行之前插入一行 ni/a/o/I/A/O<E ...

  5. 修改redis端口号

    为redis分配一个8888端口,操作步骤如下:1.$REDIS_HOME/redis.conf重新复制一份,重命名为redis8888.conf.2.打开redis8888.conf配置文件,找到p ...

  6. USACO 3.2 Contact

    ContactIOI'98 The cows have developed a new interest in scanning the universe outside their farm wit ...

  7. css基础和心得（一）

     css开始 p{    font-size:12px;    color:red;    font-weight:blod } p为选择符p{}又称选择器,指明网页中要应用样式规则的元素.属性和值之 ...

  8. SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column 'dtdate' 解决方法

    小微OAERR: SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column 'mime' at row ...

  9. C# 语言规范_版本5.0 (第11章 结构)

    1. 结构 结构与类的相似之处在于,它们都表示可以包含数据成员和函数成员的数据结构.但是,与类不同,结构是一种值类型,并且不需要堆分配.结构类型的变量直接包含了该结构的数据,而类类型的变量所包含的只是 ...

  10. Scala 字段定义

    Scala 中定义字段只有val, var两种方式,都要在定义的同时即赋值,var 可以用占位符' _ '代替. 抽象类中定义的抽象字段不用赋初值,抽象方法也不用写方法体.(在子类中给抽象字段赋值和实 ...