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 ...
随机推荐
- 动态网页基础——JSP
WEB项目的目录结构 META-INT WEB-INF 对外都是不可访问的,不可把index.jsp/index.html 放这 JSP JSP是为了简化Servlet的工作出现的替代品,Servl ...
- 使用JS区分客户端
之前遇到,上司这样一个指示. 他说:“你看,能不能帮我解决一下,ipad自带的,键盘问题.” 就是我们做的这个项目,是一个 web项目,然后 要求 电脑端 和 平板都可以访问.在日期输入框的地方.他们 ...
- C语言Ⅰ博客作业01
1.你对计算机科学与技术专业了解是怎样? 本专业培养具有良好的科学素养,系统地.较好地掌握计算机科学与技术包括计算机硬件.软件与应用的基本理论.基本知识和基本技能与方法,能在科研部门.教育单位.企业. ...
- maven指定本地jar包
来自 https://blog.csdn.net/zhengxiangwen/article/details/50734565 一.怎么添加jar到本地仓库呢?步骤:1.cmd命令进入该jar包所在路 ...
- android gradle项目剖析
1 配置文件 1.1 gradle属性文件 1.1.1 gradle.properties 对项目范围内的gradle进行配置,比如设置cache. 1.1.2 local.properties 设置 ...
- 关于golang select的用法
1 go的信道 1.1 什么是信道 信道可以理解为go协程之间进行通信的通道. 1.2 信道的声明 所有的信道都关联一个类型,一旦关联了类型,该信道就只能传输该类型的数据,传输其它类型的数据的话就是非 ...
- spring - 第N篇 一些笔记
1.properties文件的引入 <bean id="propertyConfigurer" class="org.springframework.beans.f ...
- 小油2018 win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误。并非所有的功能被成功更改。
win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误.并非所有的功能被成功更改. 从安装成功的电脑上拷贝ghost版本缺少的文件,然后再安装telnet客户端,我已打包 链接: ...
- HNUSTOJ-1257 You are my brother
1257: You are my brother 时间限制: 1 Sec 内存限制: 128 MB提交: 39 解决: 15[提交][状态][讨论版] 题目描述 Little A gets to ...
- js中封装一个自己的简单数学对象
封装一个数学对象求最大值最小值 <script> var myMath={ PI:3.1415926, max:function(){ var max=arguments[0];//注意a ...