我使用 Bootstrap 进度条来显示某人行驶的里程数在 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()
怎么样?从百分之一开始,然后开始取得有意义的进展。
堆栈片段中的演示
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 :
To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.
像这样:
<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>
关于javascript - BootStrap 进度条上显示不到 1%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29210218/