在 BootStrap 进度条上显示不到 1%答案

【问题标题】：Showing less then 1% on the BootStrap progress bar在 BootStrap 进度条上显示不到 1%
【发布时间】：2015-03-23 12:28:27
【问题描述】：

我正在使用引导进度条来显示总里程 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;

【问题讨论】：

“低于 0%”是什么意思？你的意思是负数吗？
@NewDev 对不起，那是我的错。我的意思是小于 1 的值。例如：0.02、0.5、0.000222 等抱歉，我已经纠正了我的错误。
四舍五入到小数点后即可。
@user2190986，它确实显示在 1% 以下。但是如果进度条的实际总宽度很小，那么对于一些低 %（甚至可能高于 1%）的亚像素宽度，浏览器将不会呈现它。

标签： javascript angularjs twitter-bootstrap progress-bar

【解决方案1】：

如果您不在乎它是否低于 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>

【讨论】：

【解决方案2】：

我认为最好的方法是使用名为“realProgress”之类的变量来跟踪进度条的十进制值。由于引导进度条仅适用于整数，因此您可以像这样更新它的值（在 Javascript 中）：

realProgress = 0.0; realProgress += 所取得进展的一定百分比；

$("#my-progress-bar").css("width", math.Floor(realProgress) + "%");

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

【讨论】：