码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-26 11:26:36      阅读:678      评论:0      收藏:0      [点我收藏+]

标签:

使用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执行进度提示窗口的实现

标签:

原文地址:http://www.cnblogs.com/duelsol/p/4299944.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!