zoukankan      html  css  js  c++  java
  • 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=" 250px;height: 100px;cursor: pointer;font-size: 50px;color: white;margin: auto;background-color: lightskyblue;border: dashed"/>
        </div>
    </body>
    </html>
  • 相关阅读:
    《算法》C++代码 Floyd
    《算法》C++代码 快速排序
    3-3当访问到一个文件跳转到另一个文件
    分别应用include指令和include动作标识在一个jsp页面中包含一个文件。
    历届试题 蚂蚁感冒
    HDU 2817 A sequence of numbers
    HDU-2018 母牛的故事
    算法提高 复数归一化
    算法提高 十进制数转八进制数
    算法提高 约数个数
  • 原文地址:https://www.cnblogs.com/duelsol/p/4299944.html
Copyright © 2011-2022 走看看