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="width: 250px;height: 100px;cursor: pointer;font-size: 50px;color: white;margin: auto;background-color: lightskyblue;border: dashed"/>
</div>
</body>
</html>
jQuery执行进度提示窗口的实现(progressbar)的更多相关文章
- JQuery入门——进度条
越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...
- jquery自定义进度条与h5原生进度条
介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...
- pv命令监控Linux命令的执行进度
pv命令监控Linux命令的执行进度 http://www.techweb.com.cn/network/system/2015-12-14/2241124.shtml yum install -y ...
- 通过DeveloperApi获取spark程序执行进度及异常
在应用spark时,经常要获取任务的执行进度,可以参照jobProgressListener的设计来完成该功能. 以下代码仅供参考,欢迎交流. 效果显示: 代码: package org.apache ...
- 【MS SQL】查看任务执行进度
原文:[MS SQL]查看任务执行进度 备份或还原数据库时,我一般是用MS SQL工具向导来进行,由于工具向导没有显示任务执行过程的状态, 如果数据库比较大执行时间较长的话,对任务啥时候执行完成比较迷 ...
- 【原创】大叔经验分享(19)spark on yarn提交任务之后执行进度总是10%
spark 2.1.1 系统中希望监控spark on yarn任务的执行进度,但是监控过程发现提交任务之后执行进度总是10%,直到执行成功或者失败,进度会突然变为100%,很神奇, 下面看spark ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- JQuery UI进度条——Progressbar
1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
随机推荐
- linux命令之crontab详解
crontab命令: crontab -l : 显示定时任务列表 crontab -e: 编辑定时任务 crontab -r : 删除所有定时任务 基本格式 : * * * * * command ...
- 在sublime_text3中实现项目的跳转
作为学习前端的小白,选择了sublime_text3作为学习的编译器.学习的过程是艰辛的,但也是快乐的.遇到自己不会的,有时候会折腾好几个小时,在实现预期效果的时候,那种兴奋真的难以言述. 今天,在学 ...
- 【NOIP2011提高组】选择客栈
题目不附了,是一个单纯的ST模型,但是考验各种常数优化. 最大的优化是对于同颜色的客栈来说,如果1号和2号成功配对了,那么1和3,1和4都可以成功配对,那么只要找到一对成功配对的,我们就直接加上剩下的 ...
- 【卷二】网络三—UDP服务器与客户端
这是另一个类型的服务器/客户端,无连接的 UDP: (User Datagram Protocol) 用户数据报协议 参考: P58~P60 UDP 时间戳服务器 [时间戳 就是ctime()显示的内 ...
- mac xcode 快捷键
shift + cmd + n 新建项目 cmd + n 新建文件 视图 option + cmd + 回车 打开助理编辑器 cmd + 回车 显示 ...
- 可用fidder测试的一些安全测试点
以下是整理的一些常见的安全渗透测试点 1.用工具fidder抓包拦截篡改服务器端返回的代码,导致下级拥有对上级的访问操作权限 以下是公司开发写的用户角色权限页面跳转 修改普通角色跳转的页面为管理员跳转 ...
- ucenter无法双向同步setting[allowsynlogin]为0问题解决
深入探索ucenter各种通信失败问题飞狐ITWeb问题描述:A,B两个应用,A的登录操作等同步到B,而B无法同步到A,即只能从A单向同步到B,AB之间没有实现双向同步以前碰到过没记录,这次记录下来查 ...
- 关于css起名
作者:词晖链接:https://www.zhihu.com/question/19586885/answer/48933504来源:知乎著作权归作者所有,转载请联系作者获得授权. CSS书写顺序 1. ...
- ntp升级
1. 系统与软件版本 1.1 系统版本 CentOS6.5 x86_64 1.2 ntpd软件版本 ntp-4.2.8p9.tar.gz 1.3 下载地址 官方下载地址:http://support. ...
- opencv BP神经网络使用过程
1.OpenCV中的神经网络 OpenCV中封装了类CvANN_MLP,因而神经网络利用很方便. 首先构建一个网络模型: CvANN_MLP ann; Mat structu ...