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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
python笔记(2)
2012/10/24 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python 循环数据赋值实例
2019/12/02 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
值传递还是引用传递
2015/02/08 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
房地产广告策划方案
2014/05/15 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
中考标语大全
2014/06/05 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
骨干教师申报材料
2014/12/17 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
电影复兴之路观后感
2015/06/02 职场文书
KTV员工管理制度
2015/08/06 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android