bootstrap实现动态进度条效果


Posted in Javascript onMarch 08, 2017

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});设置并打开,当然,哪种方便就用哪种

js:

//进度条的控制 
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的值,间接改变前台百分比的显示。当然,条条大路通罗马,没有最好的设计,只有更好的思想。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 #Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 #Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 #Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 #Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 #Javascript
jquery仿ps颜色拾取功能
Mar 08 #Javascript
关于Javascript中document.cookie的使用
Mar 08 #Javascript
You might like
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
使用python分析git log日志示例
2014/02/27 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Django实现学生管理系统
2019/02/26 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python numpy 反转 reverse示例
2019/12/04 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
春风行动实施方案
2014/03/28 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript