好资源导航 » 文章资讯 » bootstrap+jQuery实现的动态进度条功能示例

bootstrap+jQuery实现的动态进度条功能示例

2024-02-22 11:37:04 237

本文实例讲述了bootstrap+jQuery实现的动态进度条功能。分享给大家供大家参考，具体如下：

此款进度条实现的功能：

1.利用了bootstrap的进度条组件。

a.在最外层的

中加入class.progress，在里层

加入class.progress-bar从而实现基本的进度条。
b.在外层

中加入class.progress－striped实现条纹进度条。
c.在内层

加入class.progress－bar－danger/warning/info/success从而实现红色、黄色、蓝色、绿色
d.在外层

中加入class.active实现动画效果

2.利用jQuery对进度条进度进行控制。

0-30时显示红色，30-60显示黄色，60-90显示绿色，90-100显示绿色
实现进度条暂停、停止、重新开始、继续功能

具体代码如下：





...









$(document).ready(function(){
varvalue=0;
vartime=50;
//进度条复位函数
functionreset(){
value=0
$("#prog").removeClass("progress-bar-success").css("width","0%").text("等待启动");
//setTimeout(increment,5000);
}
//百分数增加，0-30时为红色，30-60为黄色，60-90为蓝色，>90为绿色
functionincrement(){
value+=1;
$("#prog").css("width",value+"%").text(value+"%");
if(value>=0&&value<=30){
$("#prog").addClass("progress-bar-danger");
}
elseif(value>=30&&value<=60){
$("#prog").removeClass("progress-bar-danger");
$("#prog").addClass("progress-bar-warning");
}
elseif(value>=60&&value<=90){
$("#prog").removeClass("progress-bar-warning");
$("#prog").addClass("progress-bar-info");
}
elseif(value>=90&&value<100){
$("#prog").removeClass("progress-bar-info");
$("#prog").addClass("progress-bar-success");
}
else{
setTimeout(reset,3000);
return;
}
st=setTimeout(increment,time);
}
increment();
//进度条停止与重新开始
$("#stop").click(function(){
if("stop"==$("#stop").val()){
//$("#prog").stop();
clearTimeout(st);
$("#prog").css("width","0%").text("等待启动");
$("#stop").val("start").text("重新开始");
}elseif("start"==$("#stop").val()){
increment();
$("#stop").val("stop").text("停止");
}
});
//进度条暂停与继续
$("#pause").click(function(){
if("pause"==$("#pause").val()){
//$("#prog").stop();
clearTimeout(st);
$("#pause").val("goon").text("继续");
}elseif("goon"==$("#pause").val()){
increment();
$("#pause").val("stop").text("暂停");
}
});
});





正在启动，请稍后......

暂停停止

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

bootstrap+jQuery实现的动态进度条功能示例

热门推荐

随机推荐