我用来获取进度和添加百分比的 Jquery!
/* getting the percentage of the multi step verification */
$('.track').change(function(e) {
update_percentage();
});
// supports any number of inputs and calculates done as %
function update_percentage() {
var count = $('.track').length;
var length = $('.track').filter(function() {
return this.value;
}).length;
var done = Math.floor(length * (100 / count));
$('.perc').text(done);
$('.meter').width(done + "%");
$(document).ready(function(){
$a = done;
$("#applicant_percentages").val($a);
});
}
这是进度条以条形和百分比显示的地方
<div class="progress-meter">
<h5>Profile Strength <span class='perc'>0</span>%</h5>
<span class="meter"></span>
<br>
</div>
CSS
.meter {
display: inline-block;
width: 0;
height: 20px;
margin-bottom: 10px;
background-color:green;
}
我正在获取表单中填写的输入数量的百分比!我已将我接受的值放入进度条中。但是现在需要在进度条达到特定值后更改其颜色。
抱歉,如果我不清楚!
最佳答案
给定一个包含您所需波段的数组
let colors = [
{max:20,color:'red'},
{max:75,color:'yellow'},
{max:100,color:'green'}];
您可以使用 Array.find
根据 done
数量找到正确的颜色:
var color = colors.find(x => x.max >= done).color;
然后使用 jQuery css
将其应用到您的进度条
$('.meter').width(done + "%").css('background-color',color);
下面的实例:
/* getting the percentage of the multi step verification */
$('.track').change(function(e) {
update_percentage();
});
let colors = [{max:20,color:'red'}, {max:75,color:'yellow'},{max:100,color:'green'}];
// supports any number of inputs and calculates done as %
function update_percentage() {
var count = $('.track').length;
var length = $('.track').filter(function() {
return this.value;
}).length;
var done = Math.floor(length * (100.0 / count));
var color = colors.find(x => x.max >= done).color;
$('.perc').text(done);
$('.meter').width(done + "%").css('background-color',color);
}
.meter {
display: inline-block;
width: 0;
height: 20px;
margin-bottom: 10px;
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<div class="progress-meter">
<h5>Profile Strength <span class='perc'>0</span>%</h5>
<span class="meter"></span>
<br>
</div>
关于jquery - 如何添加根据进度改变颜色的多色百分比条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59175375/