本文介绍如何利用Bootstrap的进度条组件结合jQuery脚本，实现具有颜色变化、动画效果及暂停、继续等控制功能的动态进度条。通过设置不同数值区间的样式，展示红色、黄色和绿色状态，并演示完整的交互逻辑。
Bootstrap与jQuery实现动态进度条控制
本文详细讲解如何使用Bootstrap配合jQuery来实现一个动态的进度条功能，供读者参考学习。
该进度条主要实现以下功能：
首先，基于Bootstrap的进度条组件进行构建。
a. 在最外层的<div>元素中添加class .progress，并在内部<div>中添加class .progress-bar，即可生成基础进度条。 b. 若需显示条纹样式，可在外层<div>中添加class .progress-striped。 c. 通过在内层<div>中指定class .progress-bar-danger、.progress-bar-warning、.progress-bar-info或.progress-bar-success，可分别呈现红色、黄色、蓝色或绿色效果。 d. 在外层<div>中添加class .active，可启用进度条的动画效果。
其次，使用jQuery脚本对进度条的进度值进行动态控制。
进度条根据数值区间显示不同颜色：0-30显示红色，30-60显示黄色，60-90及90-100显示绿色。同时，实现了进度条的暂停、停止、重新开始和继续等功能。
具体实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>...</title>
<!--在IE浏览器中运行最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE-Edge">
<!--初始化移动浏览器显示-->
<meta name="viewport" content="width-device-width,inital-scale=1">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" >
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var value = 0;
var time = 50;
//进度条复位函数
function reset( ) {
value = 0
$("#prog").removeClass("progress-bar-success").css("width","0%").text("等待启动");
//setTimeout(increment,5000);
}
//百分数增加，0-30时为红色，30-60为黄色，60-90为蓝色，>90为绿色
function increment( ) {
value += 1;
$("#prog").css("width",value + "%").text(value + "%");
if (value>=0 && value<=30) {
$("#prog").addClass("progress-bar-danger");
}
else if (value>=30 && value <=60) {
$("#prog").removeClass("progress-bar-danger");
$("#prog").addClass("progress-bar-warning");
}
else if (value>=60 && value <=90) {
$("#prog").removeClass("progress-bar-warning");
$("#prog").addClass("progress-bar-info");
}
else if(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("重新开始");
} else if ("start" == $("#stop").val()) {
increment();
$("#stop").val("stop").text("停止");
}
});
//进度条暂停与继续
$("#pause").click(function() {
if ("pause" == $("#pause").val()) {
//$("#prog").stop();
clearTimeout(st);
$("#pause").val("goon").text("继续");
} else if ("goon" == $("#pause").val()) {
increment();
$("#pause").val("stop").text("暂停");
}
});
});
</script>
</head>
<body>
<div class="progress progress-striped active">
<div id="prog" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
<span id="proglabel">正在启动，请稍后......</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<button id="pause" class="btn btn-primary" value="pause">暂停</button>
<button id="stop" class="btn btn-primary" value="stop">停止</button>
<!--<button id="goon" class="btn btn-primary">继续<button>-->
</div>
</div>
</body>
</html>此外，推荐一款本站提供的在线可视化布局工具，供读者参考使用：
在线Bootstrap可视化布局编辑工具： http://tools.jb51.net/aideddesign/layoutit
希望本文所述内容对大家基于Bootstrap进行程序设计有所帮助。