作者:c_陈可儿 | 来源:互联网 | 2022-06-23 12:43
Bootstrap的动态进度条:
html: 创建一个modal 这里使用fade先将modal隐藏起来,然后
Bootstrap的动态进度条:
html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单
PS:关于模态框:如果你想实现点击空白处不关闭模态框,可以在
这里初始化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的值,间接改变前台百分比的显示。当然,条条大路通罗马,没有最好的设计,只有更好的思想。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ...
[详细]
蜡笔小新 2023-12-11 12:37:10
本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ...
[详细]
蜡笔小新 2023-12-11 12:06:41
随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ...
[详细]
蜡笔小新 2023-12-10 20:05:15
本文主要分析了Netty源代码中服务器端启动的过程,包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用,深入理解Netty服务器端的启动过程。同时,还介绍了LoggingHandler的作用和使用方法,帮助读者更好地理解Netty源代码。 ...
[详细]
蜡笔小新 2023-12-10 15:42:28
本文内容皆为作者原创,如需转载,请注明出处:https:www.cnblogs.comxuexianqip13045462.html1.自定义分页器的拷贝及使用当我们需要使用 ...
[详细]
蜡笔小新 2023-10-16 17:47:02
Java工程师无疑是当下令人艳羡的工作之一,因此,每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ...
[详细]
蜡笔小新 2023-10-16 15:56:51
本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ...
[详细]
蜡笔小新 2023-12-13 21:31:18
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ...
[详细]
蜡笔小新 2023-12-13 19:12:25
1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ...
[详细]
蜡笔小新 2023-12-13 18:03:01
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ...
[详细]
蜡笔小新 2023-12-13 15:38:19
本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
[详细]
蜡笔小新 2023-12-13 13:58:25
本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ...
[详细]
蜡笔小新 2023-12-13 12:54:29