帶有持續時間和百分比的進度條

Question

我想創建一個具有持續時間（完成動畫所需的時間）和百分比的進度條。

所以我希望這個進度條需要 3000 毫秒才能完成（達到 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>

它有效，但需要更長的時間 5000ms 。

我還添加了 Jquery 標簽，因為我不在乎我是使用 javascript 還是 jquery

謝謝你們。

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


}

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>

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

Answer 4

我使用了你們中的一些人提供的答案，但您在進度條上弄錯了一件事。 您需要將 jquery 中的“px”更改為“%”，否則進度條將只有 100px 寬。 由於我使用的是 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()