jQuery 制作实时进度条

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>

脚本

$(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);
});