bootstrap得动态进度条
Bootstrap的动态进度条:
html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单
<div class="modal fade" data-backdrop="static" tabindex="-1" id="progressbar">
<!--窗口声明:-->
<div class="modal-dialog modal-lg">
<!-- 内容声明 -->
<div class="modal-content">
<!-- 主体 -->
<div class="modal-body">
<div class="progress progress-striped active">
<div id="test" class="progress-bar progress-bar-success" role="progressbar" style="width: 10%;">
保存中:{{length}}%
</div>
</div>
</div>
</div>
</div>
</div>
PS:关于模态框:如果你想实现点击空白处不关闭模态框,可以在<div class="modal fade" data-backdrop="static">这里初始化modal的参数,或者在js里面通过
$('.modal').modal({backdrop: 'static', keyboard: false});设置并打开,当然,哪种方便就用哪种
//进度条的控制
function startProgerss(){
var trytmp=0;
var wait=false;
run();
function run(){
if(!wait){
vue.length+=(Math.random()*10).ceil();
}
if(vue.length<=98){
if(vue.length>80 && textupover && imgupover){
vue.length=100;
$("div[role='progressbar']").css("width","100%");
//短暂延迟后刷新页面,貌似""作用是刷新本页面
refreshtohome(1000, "");
}else{
$("div[role='progressbar']").css("width",vue.length+"%");
var timer=setTimeout(run,100);
}
}else{//等待时间过长,可能出现了其他错误
wait=true;//进入等待状态
vue.length=99;
$("div[role='progressbar']").css("width","99%");
//查看服务器的响应
if(textupover && imgupover){
vue.length=100;
$("div[role='progressbar']").css("width","100%");
//短暂延迟后刷新页面,貌似""作用是刷新本页面
refreshtohome(1000, "");
}
if(++trytmp<10){//超时等待(大约10s)
var timer=setTimeout(run,1000);
}else{
alert("服务器响应失败!");
//隐藏进度条提示框
$('#progressbar').modal('hide');
//重置进度条的长度
vue.length=10;
}
}
}
}
解释:重点是要明白进度条的意义:给用户一个读条,让用户看到程序是在进行而不是死机了,这可以加强应用的用户体验效果
我上面代码是这样设计的:当提交表单,调用js显示模态框(相当于显示进度条),然后js动态改变进度条的样式(长度),自己控制一个可取的范围
当前台接收到后台的响应的时候,让进度条加载到100%,关闭模态框(隐藏进度条),刷新数据。。
关于百分比的显示,我这里使用了Vue.js来代理,js改变vue.length的值,间接改变前台百分比的显示。当然,条条大路通罗马,没有最好的设计,只有更好的思想。
bootstrap得动态进度条的更多相关文章
- Bootstrap -- 缩略图、进度条、列表组、面板
Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
- Qt实现炫酷启动图-动态进度条
目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...
- bootstrap与jQuery结合的动态进度条
此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...
- 超简单CSS3水平动态进度条+小圆球+背景色渐变
实现的的效果图如下:效果是动态加载的 代码如下: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue实现mp3音乐播放及动态进度条
今天碰到一个Vue点击mp3播放及进度条动态走动的小功能,记录一下: 首先是通过HTML5 audio标签引入音频: <template> <div class="x-fo ...
- bootstrap走动的进度条
1.页面效果: 起始位置:
- 利用面向对象思想封装Konva动态进度条
1.html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 基于css3的环形动态进度条(原创)
基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...
随机推荐
- Java的in.nextInt()和in.nextLine()方法的具体内涵
本人也是刚开始学习java语言,在学习的过程中,老师让我们做一个模拟学生学籍管理系统的小程序.因为刚开始,做的是比较简单的,用switch语句做界面,然后配合Scanner 接收输入的数字进行跳转,完 ...
- Maven 中 resources 作用
默认情况下,如果没有指定resources,目前认为自动会将src/main/resources下的.xml文件放到target里头的classes文件夹下的package下的文件夹里.如果设定了re ...
- [DS+Algo] 001 先简单说说算法
目录 1. 通俗地讲 2. 算法的五大特性 3. 众所周知的"公式" 4. 举个例子 例 1. 百钱买百鸡 1. 数学解法 2. C 的解法 3. Python 的解法 4. Ja ...
- MySQL-快速入门(11)用户管理
1.权限表 存储用户权限信息表主要有:user.db.host.tables_priv.columns_priv.procs_priv. 1>user表: 记录允许连接到服务器的账号信息,里面的 ...
- nginx知识问答
1.请解释一下什么是Nginx? 答:Nginx是一个web服务器和反向代理服务器,用于HTTP.HTTPS.SMTP.POP3和IMAP协议.2.请列举Nginx的一些特性? 答:Nginx服务器的 ...
- shell学习笔记3---shell变量
Shell变量的定义.赋值和删除 脚本语言在定义变量时通常不需要指明类型,直接赋值就可以,Shell 变量也遵循这个规则. 在 Bash shell 中,每一个变量的值都是字符串,无论你给变量赋值时有 ...
- P2586 [ZJOI2008]杀蚂蚁
传送门 快乐模拟,修身养性 代码长度其实还好,主要是细节多 只要知道一些计算几何基础知识即可快乐模拟,按着题目要求一步步实现就行啦 注意仔细读题,蚂蚁每 $5$ 秒乱走一次的时候是只要能走就走了,不一 ...
- localStorage的使用和vuex的拆分
问题1:在隐身模式.或者用户未启用的情况下,使用localStorage可能会导致浏览器直接报错,怎么办? 方法:使用try-catch包裹 代码示例: store.jsimport Vue from ...
- 一个有python扩展库的下载网站
https://www.lfd.uci.edu/~gohlke/pythonlibs/
- 理解长短期记忆网络(LSTM NetWorks)
转自:http://www.csdn.net/article/2015-11-25/2826323 原文链接:Understanding LSTM Networks(译者/刘翔宇 审校/赵屹华 责编/ ...