Question

我怎样才能制作实时进度条。这就是我使用的进度条，即引导进度条。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="progress">
      <div class="progress-bar" role="progressbar"
      aria-valuemin="0" aria-valuemax="100">
        Time Passed
      </div>
      <div class="center">Time Left</div>
    </div>

如何通过每秒增加1％来实现更新。我需要它，以便类进度条的宽度更改为一定量的像素。 100px = 100％填充进度条。

让我知道我不够清楚。

Answer 1

这应该可以解决问题，在jsfiddle中尝试它并且它正在工作。您可能想要弄乱文本以使其输出您想要的内容，当然可以通过更改超时来改变速度（1000是调用之间的毫秒数）

我应该补充一点，使用ID而不是类来引用DOM是一种很好的做法（仅仅是为了快速）。因为这样可以让你在一个页面上有多个进度条而不会意外地相互交互。

<强> HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div class="progress-bar" role="progressbar"
  aria-valuemin="0" aria-valuemax="100">
  </div>
  <div class="center" id="timeleft"></div>
</div>

<强> SCRIPT

$(function() {
    i = 0;
    var myInterval = setInterval(function() {
        $(".progress-bar").attr("aria-valuenow",i);
        $(".progress-bar").css("width",i);
        $("#timeleft").html("Time Left: " + (100-i) + "s");
        if (i == 100) {
            $("#timeleft").html("Complete!");
            clearInterval(myInterval);
        }
        i++;
    }     
    ,1000);
});

jQuery制作一个实时进度条

1 个答案: