javascript - 在BootStrap进度条上显示少于1％的内容

我正在使用引导进度条来显示某人所覆盖的总里程数（总计23,872英里）。

例如，如果用户A仅覆盖5英里，则表示：

5/23872 = 0.00020945 * 100 = 0.02094504英里

当前低于1％的任何内容都不会显示在进度条上。





是否有可能在1条以下显示英里的百分比，因此它仅在上图中的28％处变为绿色。

转换代码：

// Calculating Percentages for each region
var ukPercent = $scope.ukTotal / 23872;
var apacPercent = $scope.apacTotal / 23872;
var naPercent = $scope.naTotal / 23872;

$scope.ukPercentage = ukPercent * 100;
$scope.naPercentage = naPercent * 100;
$scope.apacPercentage = apacPercent * 100;

最佳答案

如果您不在乎它是否小于1％，那么如何使用Math.max()从1％开始，然后再开始有意义的进步。

堆栈摘要中的演示

var $traveled = $("#traveledMiles"),
    $total = $("#totalMiles"),
    $progressBar = $('.progress-bar');

$($traveled).add($total).keyup(function(){

  var percent = $traveled.val() / $total.val() * 100;

  // at least 1%
  percent = Math.max(percent,1);

  $progressBar
    .css('width', percent+'%')
    .attr('aria-valuenow', percent)
    .children(".sr-only").html(percent+'%');

}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<div class="form-group">
  <label for="traveledMiles">Traveled Miles</label>
  <input type="text" class="form-control" id="traveledMiles"
         placeholder="Enter Traveled Miles" value="5">
</div>
<div class="form-group">
  <label for="totalMiles">Total Miles</label>
  <input type="text" class="form-control" id="totalMiles"
         placeholder="Enter Total Miles" value="23872">
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="width: 60%;"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">60%</span>
  </div>
</div>

由于有标签，您甚至可以遵循Bootstrap's suggestion：


  为确保标签文本即使在百分比较低的情况下也清晰可见，请考虑在进度条上添加最小宽度。


像这样：

<div class="progress-bar" style="min-width: 2em;">

var $traveled = $("#traveledMiles"),
    $total = $("#totalMiles"),
    $progressBar = $('.progress-bar');

$($traveled).add($total).keyup(function(){

  var percent = $traveled.val() / $total.val() * 100;

  // at least 1%
  percent = Math.max(percent,1);

  // round off decimals
  percent = Math.round(percent);

  // max of 100%
  percent = Math.min(percent,100);

  $progressBar
    .css('width', percent+'%')
    .attr('aria-valuenow', percent)
    .html(percent+'%');

}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<div class="form-group">
  <label for="traveledMiles">Traveled Miles</label>
  <input type="text" class="form-control" id="traveledMiles"
         placeholder="Enter Traveled Miles" value="5">
</div>
<div class="form-group">
  <label for="totalMiles">Total Miles</label>
  <input type="text" class="form-control" id="totalMiles"
         placeholder="Enter Total Miles" value="23872">
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="min-width: 2em;width: 60%;"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>