如何显示进度栏的百分比

Question

因此，我正在尝试在一个页面上显示每个栏的百分比，这是我的进度条的HTML：

<div class="col-md-5">
<p>Progress bar1</p>
  <div class="progress progress-striped active">
 <div class="progress-bar progress-bar-Success" style="width: 50%;"></div>
 </div>
 <p>Progress bar2</p>
 <div class="progress progress-striped active">
 <div class="progress-bar progress-bar-Success" style="width: 20%;"></div>
 </div>
 <p>Progress bar3</p>
 <div class="progress progress-striped active">
 <div class="progress-bar progress-bar-Success" style="width: 30%;"></div>
 </div>

这是我使用此栏的JS功能，

$(document).ready(function() {
 $(".progress-bar").each(function(index) {
//if(index >=0 && index<=1)
//{
$(this).animate({
  width: Math.floor((Math.random() * 100) + 1) + "%"
}, 2500);

//        }
})
});

我得到的所有栏都是自动生成的，但是我想显示每个条的百分比酒吧，我该怎么做？ 这是 fiddle

Answer 1

当您使用Bootstrap 3时，您可以将百分比添加到“ .progress-bar” div：

$( document ).ready(function() {
    $(".progress-bar").each(function (index ) {
        //if(index >=0 && index<=1)
        //{
            var percent = Math.floor((Math.random() * 100) + 1) + "%";
            $(this).html(percent);
            $(this).animate({width: percent}, 2500);
             
//        }
    })
}); 

您的jsfiddle扩展

Answer 2

您可以在DIV本身内添加百分比文本。检查下面的代码：

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-Success" style="width: 50%;"> 50 </div>
</div>