在BootStrap进度条上显示不到1％

Question

我正在使用引导程序进度条显示某人在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;

Answer 1

如果你不关心它是多少少于1％，那么如何使用Math.max()从1％开始，然后在此之后开始取得有意义的进展。

Stack Snippets中的演示

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>

Answer 2

我认为最好的方法是使用一个名为＆＃34; realProgress＆＃34;的变量。跟踪进度条的十进制值。由于引导进度条仅适用于整数，因此您可以更新它的值（在Javascript中）：

realProgress = 0.0; realProgress + =取得一定程度的进展;

$（＆＃34;＃my-progress-bar＆＃34;）。css（＆＃34; width＆＃34;，math.Floor（realProgress）+＆＃34;％＆＃34;）; < / p>

这样，进度条的值仍然会以对用户有意义的方式更新。