HTML5進度條動畫

-1

我在我的應用程序中使用了HTML5進度條。我想知道是否有任何方法來控制進度條的動畫速度。我想在一定的時間間隔後顯示進度，我使用javascript的setTimeout方法來設置屏幕渲染後的值。但動畫太快了。有沒有辦法控制它？HTML5進度條動畫

謝謝。

來源

2012-06-18 techie

其中是代碼.............. .................................. – 2012-06-18 07:45:58

哪個HTML5進度條？在問這裏之前你嘗試過什麼？ – Phil

我不知道我理解你所說的「動畫」的意思，但在這裏是利用同時控制發展速度的進度條的例子：http://jsfiddle.net/526hM/

HTML：

<progress max="200" value="1"></progress> 
<div id="val"></div>

腳本：

$(document).ready(function(){ 
    var interval = 2, //How much to increase the progressbar per frame 
     updatesPerSecond = 1000/60, //Set the nr of updates per second (fps) 
     progress = $('progress'), 
     animator = function(){ 
      progress.val(progress.val()+interval); 
      $('#val').text(progress.val()); 
      if (progress.val()+interval < progress.attr('max')){ 
       setTimeout(animator, updatesPerSecond); 
      } else { 
       $('#val').text('Done'); 
       progress.val(progress.attr('max')); 
      } 
     } 

    setTimeout(animator, updatesPerSecond); 
});

來源

2012-06-18 08:02:50 Thomas

這裏是例子。 JavaScript函數：

window.onload = addTenPercent(); 

function addTenPercent() { 
    var bar = document.getElementById("progressBar"); 
    setInterval(addTenPercent, 100); 
    bar.value += 5; 
};

HTML：以上

<progress id="progressBar" max="100" value="0"></progress>

來源

2012-06-18 08:04:11

Mantas公司的答案看起來不錯，工作（無需使用jQuery的），但我不知道是否我們也可以使用setTimeout函數？在100次迭代後退出的遞歸函數中setTimeout是否也可以工作？複製曼塔斯代碼從上方並改變它一點：

JavaScript的：

function onWindowLoad(){ // to be called by onload event 
    var bar = document.getElementById("progressBar"); 
    addOne(); 
} 

function addOne() { 
    if (bar.value < 100) { // this is the max value of the bar and the # of iterations 
     setTimeout(addOne, 80); // this literal value controls the speed 
     bar.value += 1;  
    }else{ 
     return; 
    } 
}

HTML：

<progress id="progressBar" max="100" value="0"></progress>

來源

2014-06-13 03:50:05 stdout123

HTML5進度條動畫

回答

相關問題