在 BootStrap 进度条上显示少于 1% [英] Showing less then 1% on the BootStrap progress bar

查看：64
本文介绍了在 BootStrap 进度条上显示少于 1%的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用引导程序进度条来显示某人在总共 23,872 英里的里程中所占的百分比.

例如，如果用户 A 仅行驶了 5 英里，这意味着:

5/23872 = 0.00020945 * 100 = 0.02094504 英里.

目前进度条上不会显示任何低于 1% 的内容.

是否可以在条形图中显示低于 1 英里的百分比，以便它仅在上图中的 28% 处亮起绿色.

转换代码:

//计算每个区域的百分比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 百分比 = $traveled.val()/$total.val() * 100;//至少 1%百分比 = Math.max(percent,1);$进度条.css('宽度', 百分比+'%').attr('aria-valuenow', 百分比).children(".sr-only").html(percent+'%');}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="样式表"/><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">旅行里程</label><input type="text" class="form-control" id="traveledMiles"placeholder="输入旅行里程" value="5">

<div class="form-group"><label for="totalMiles">总里程</label><input type="text" class="form-control" id="totalMiles"placeholder="输入总里程" value="23872">

<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>

既然你有标签，你甚至可以按照Bootstrap的建议:

<块引用>

为了确保标签文本即使在百分比较低的情况下也能保持清晰，请考虑向进度条添加最小宽度.

像这样:

var $traveled = $("#traveledMiles"),$total = $("#totalMiles"),$progressBar = $('.progress-bar');$($traveled).add($total).keyup(function(){var 百分比 = $traveled.val()/$total.val() * 100;//至少 1%百分比 = Math.max(percent,1);//四舍五入小数百分比 = Math.round(percent);//最大 100%百分比 = Math.min(percent,100);$进度条.css('宽度', 百分比+'%').attr('aria-valuenow', 百分比).html(百分比+'%');}).keyup();

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="样式表"/><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">旅行里程</label><input type="text" class="form-control" id="traveledMiles"placeholder="输入旅行里程" value="5">

<div class="form-group"><label for="totalMiles">总里程</label><input type="text" class="form-control" id="totalMiles"placeholder="输入总里程" value="23872">

<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%

I am using the bootstrap progress bar to show the percentage of miles covered by someone from a total of 23,872 miles.

For example if user A covered only 5 miles which means:

5/23872 = 0.00020945 * 100 = 0.02094504 miles.

Currently anything below 1% does not show up on the progress bar.

Is it possible to be able to show the percentage of miles below 1 the bar so it lights up green just the 28% in the image above.

Code for Conversion:

// 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;

解决方案

If you don't care if how much less than 1% it is, how about using Math.max() to just start at one percent and then start making meaningful progress after that.

Demo in 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>

Since you have a label, you could even follow Bootstrap's suggestion:

To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

Like this:

<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>

这篇关于在 BootStrap 进度条上显示少于 1%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆