带有持续时间和百分比的进度条

Question

我希望创建一个具有持续时间（完成动画所需的时间）和百分比的进度条。

因此，我希望此进度条需要3000ms才能完成（达到100％）：

目前为止：

  <div id="box"></div>

  <script>
     function start(){
          var duration = 5000; // it should finish in 5 seconds !
         var max = 100;
         var i = 0 ;
         var interval = setInterval(function(){
            i++;
            offset  = (max*i)/duration;
            console.log(offset);
            $("#box").css("width", offset + "px");
            $("#box").text(parseInt(offset) + "%");
            if(i>=duration){
                alert("done "+i);
                clearInterval(interval);
            }
        }, 1);


      }
  </script>

它可以工作，但它需要比5000毫秒更长的时间。

我还添加了Jquery标签，因为我不在乎使用JavaScript还是jQuery。

谢谢大家。

- user4328424

Answer 1

随意根据需要进行微调，但主要问题已经解决。即，您的间隔不应该每1毫秒运行一次，并且它应该在100%时完成。下面的代码将设置您的间隔始终在每1%处运行。

function start(){
     var duration = 5000; // it should finish in 5 seconds !
     var percent = duration / 100; // 1 percent of duration
     var i = 0 ;
     var interval = setInterval(function(){
        i++;
        $("#box").css("width", i + "px");
        $("#box").text(i + "%");
        if(i>=100){
            alert("done");
            clearInterval(interval);
        }
    }, percent);


}

- Ben Fried

---

原本无法按时完成的原因是 setInterval 的最小持续时间为 4 毫秒。如果低于这个值，浏览器将使用 4 毫秒。在定时器内执行的代码可能需要比 4 毫秒更长的时间，这将进一步降低性能。这种代码更好，因为你每 1% 只需要更新一次文本/进度条，或者只需要更新 100 次而不是 5000 次。 - AndrewR

Answer 2

最简单的解决方案可能是使用jQuery的.animate()函数。

function start() {
  var duration = 5000; // it should finish in 5 seconds !
  $("#box").stop().css("width", 0).animate({
    width: 100
  }, {
    duration: duration,
    progress: function(promise, progress, ms) {
      $(this).text(Math.round(progress * 100) + '%');
    }
  });
}

start()

#box {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>

另一个解决方案是查看时间差异。

function start() {
  var duration = 5000; // it should finish in 5 seconds !
  var st = new Date().getTime();
  var interval = setInterval(function() {
    var diff = Math.round(new Date().getTime() - st),
      val = Math.round(diff / duration * 100);
    val = val > 100 ? 100 : val;
    $("#box").css("width", val + "px");
    $("#box").text(val + "%");
    if (diff >= duration) {
      clearInterval(interval);
    }
  }, 100);
}

start()

#box {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>

---

同样使用 requestAnimationFrame

function start() {
  var duration = 5000; // it should finish in 5 seconds !
  var st = window.performance.now();
  window.requestAnimationFrame(function step(time) {
    var diff = Math.round(time - st),
      val = Math.round(diff / duration * 100);
    val = val > 100 ? 100 : val;
    $("#box").css("width", val + "px");
    $("#box").text(val + "%");
    if (diff < duration) {
      window.requestAnimationFrame(step);
    }
  })
}

start()

#box {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box"></div>

- Arun P Johny

---

我认为最好的方法是使用 enctype="multipart/form-data" 从 post 方法观察 AJAX 调用的进度。基于时间长度的进度条不能捕捉到进度条的真实用途。 - Nakos Kotsanis

Answer 3

不确定您是否已经在使用，但您可以使用引导程序来完成此操作。

<div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >


var value = 0;

function start(){
    value += 5;
    $( ".progress-bar" ).css("width", value+"%").attr("aria-valuenow", value);    
    if ( value%5 == 0 ) { 
        return setTimeout(restart, 100); 
    }
    if(value >= 100)
        return;
    else
        setTimeout(restart, 50);
}

function restart() {
    start();
}

- himanish.k

Answer 4

我使用了你们中的一些人提供的答案，但是在进度条上有一个错误。你需要将jquery中的“px”更改为“%”，否则进度条将只有100像素宽。由于我正在使用Bootstrap进度条，这里的值将根据已经存在的内容进行修改，并随着页面加载而填充进度包装器。

 function start() {
 var duration = 5000; // it should finish in 5 seconds !
 var st = window.performance.now();
 window.requestAnimationFrame(function step(time) {
 var diff = Math.round(time - st),
 val = Math.round(diff / duration * 100);
 val = val > 100 ? 100 : val;
 $(".progress-bar").css("width", val + "%");
 $(".progress-bar").text(val + "%");
 if (diff < duration) {
   window.requestAnimationFrame(step);
   }
 })
}
start()    

- CodingSince007