【问题标题】:How to add multi colored percentage bar that changes colors according to its progress?如何添加根据进度更改颜色的多色百分比条?
【发布时间】:2020-03-29 05:13:40
【问题描述】:

我用来获取进度并添加百分比的 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;
}

我正在获取表单中填写的输入数量的百分比!我已将我所取的值放入进度条中.. 但是现在需要更改进度条的颜色,一旦它们达到某些值。

如果我不清楚,对不起!

【问题讨论】:

标签: jquery html css


【解决方案1】:

给定一个包含所需波段的数组

let colors = [
    {max:20,color:'red'}, 
    {max:75,color:'yellow'},
    {max:100,color:'green'}];

您可以根据done 的数量使用Array.find 找到正确的颜色:

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>

【讨论】:

  • 谢谢你正是我想要的!感谢其他试图帮助我的人!
猜你喜欢
  • 2023-03-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-21
  • 1970-01-01
  • 2019-09-16
相关资源
最近更新 更多