如何在 Bootstrap 3 进度条中给出计算出的宽度？答案

【问题标题】：How to give the calculated width in Bootstrap 3 Progress Bars?如何在 Bootstrap 3 进度条中给出计算出的宽度？
【发布时间】：2019-06-10 07:05:28
【问题描述】：

我有一个页面，其中包含按表格顺序排列的最后一组文件，并且我有这些文件的计数。在这些文件中，我将打开和关闭文件作为状态。

我想在进度条中显示已关闭文件的百分比。这里仅根据宽度改变进度条。

现在我的问题是如何将计算值作为宽度给出。我正在使用引导程序 3。

谁能指引我正确的方向。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">55%</div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

您的实际问题是什么，如何获取百分比或如何设置进度条百分比？
@OM PRAKASH 就像我有 80 个文件，其中 50 个文件已关闭，30 个已打开，根据关闭的文件计数，进度条应该会改变。总文件数可能随时变化。
所以，计算百分比并设置宽度和值。有什么问题？

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

// total files
let totalFiles = 42;

// closed files
let closedFiles = 30;

// find progress bar
const progressBar = document.querySelector('.progress-bar[role="progressbar"]');

// find remaining progress bar
const remainingBar = document.querySelector('.progress-bar[role="remaining"]');

function onFileChange() {
  // calculate percentage
  let percentage = Math.min(Math.max(Math.floor(closedFiles / totalFiles * 100), 0), 100);
  // calculate remaining percentage
  let remaining = 100-percentage;

  // apply percentage
  progressBar.style.width = percentage + '%';
  progressBar.innerText = percentage + '%';
  remainingBar.style.width = remaining + '%';
  remainingBar.innerText = remaining + '%';
}







// simulate file change
document.querySelector('#totalFiles').addEventListener('change', e => {
  totalFiles = e.target.value;
  onFileChange();
});
document.querySelector('#closedFiles').addEventListener('change', e => {
  closedFiles = e.target.value;
  onFileChange();
});

onFileChange();

.progress-bar[role="remaining"] {
  background-color: #888;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">55%</div>
      <div class="progress-bar" role="remaining" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">45%</div>
    </div>
  </div>





  <!-- Simulatet file change controls -->
  <form>
    <div class="form-group">
      <label for="totalFiles">Total Files</label>
      <input type="number" class="form-control" id="totalFiles" placeholder="Total Files" value="42">
    </div>
    <div class="form-group">
      <label for="closedFiles">Closed Files</label>
      <input type="number" class="form-control" id="closedFiles" placeholder="Closed Files" value="30" />
    </div>
  </form>

</body>

</html>

【讨论】：

对不起，我是新手。我可以知道这个进度条如何设置宽度值。喜欢它是如何发现的？
@Wolverine 基本上你是按当前状态计算百分比。例如10 个文件中有 4 个文件，所以：4 / 10 * 100%，你得到 40%。然后把它塞进它的风格width: 40%。
// 查找进度条 const progressBar = document.querySelector('.progress-bar'); -> 这条线我没有得到。比如它是如何发现的，是按类名吗？
@Wolverine 这是js找到进度条元素的部分，所以它可以改变它的样式和文本等，很基本的东西，如果你用过jQuery，它相当于const progressBar = $('.progress-bar')
在同样的场景下，如果关闭了30个文件就意味着打开了另外12个文件，是否可以在同一个进度条中显示打开文件的百分比？ 71% 关闭，29% 开放。这可能在同一个进度条中吗？