jquery动态进度条颜色
文章描述：
jQuery动态进度条以及改变进度条颜色
html
<div id="wrapper" style="padding-left: 20%;padding-right:20%">
<div class="progress progress-striped active" >
<div id="prog" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width:0%;min-width: 3em;">
<span id="proglabel">正在发送...</span>
</div>
</div>
</div>javascript
根据进度显示不同颜色
$(function(){
var value = 0;
setInterval(function(e){
if (value != 100) {
value = parseInt(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");
}
}
}, 50);
})
效果如下：
自定义进度比例
$(function(){
var list = [1,2,3,4,5];
var num = list.length;
var val = (1 / num) * 100;
console.log(val)
$.each(list, function(index, value, array) {
console.log(index+'-'+value)
setTimeout(function(){
console.log(val*index+val)
var v = val*index+val
$("#prog").css("width", v + "%").text(v + "%");
},index * 1000)
});
})
发布时间：2022/03/11
发表评论