使用JavaScript動畫HTML5進度條

我正在嘗試做一個簡單的HTML5進度條。當用戶點擊一個按鈕時，我希望它（onclick）開始動畫，以便它在三秒鐘內從0-100（完整）開始。它應該是一些非常基本的Javascript，我期望把它扔在我的文檔頭上。使用JavaScript動畫HTML5進度條

非常類似： HTML5 progress bar animation

我只需要它的onclick代替的onload和一個按鈕。這只是一個標準的HTML進度條，所以它看起來是這樣的：

<progress id="progress" value="0" min="0" max="100">0%</progress> 
<input type="button" value="button" onclick="[make_progress_bar_go_from_0_to_100]">

來源

2012-08-17 Lindsay Roberts

所有你需要的是從您發佈的問題，這個例子： http://jsfiddle.net/526hM/

，它重視在onload的部分是這樣的：

$(document).ready(function(){ 
    ... 
    setTimeout(animator, updatesPerSecond); 
}

您只需將此animator函數附加到按鈕上即可。要在3秒內發生效果，請更新時序變量。

HTML：

<progress max="200" value="0"></progress> 
<button id="theButton">Start!</button>

腳本：

$(document).ready(function(){ 
    var msecsPerUpdate = 1000/60; // # of milliseconds between updates, this gives 60fps 
    var progress = $('progress'); 
    var duration = 3;    // secs to animate for 
    var interval = progress.attr('max')/(duration*1000/msecsPerUpdate); 

    var animator = function(){ 
      progress.val(progress.val() + interval); 
      if (progress.val() + interval < progress.attr('max')){ 
       setTimeout(animator, msecsPerUpdate); 
      } else { 
       progress.val(progress.attr('max')); 
      } 
     } 

    $('#theButton').click(function(e) { 
     e.preventDefault(); 
     animator(); 
    }); 
});

演示：http://jsfiddle.net/526hM/28/

來源

2012-08-17 02:18:54

我不能得到這個工作，我不知道爲什麼。 jsfiddle中的代碼直接插入嵌套在腳本標記中的文檔頭部，但它仍然刷新我的頁面並且什麼都不做。 http://lrroberts0122.github.com/WDF/html5_form.html是一個包含我所有代碼的頁面，包括插入的js。感謝您的幫助。 – 2012-08-17 02:37:41

你的頁面上有jQuery嗎？如果您的網頁也可公開訪問，則可以發佈您的網頁。 – 2012-08-17 02:38:27

你需要在你的頁面中包含jQuery，它是一個庫，使得它更容易在JavaScript中進行編碼。您只需在**上述腳本之前在您的頭**中加入另一個腳本標記： '' – 2012-08-17 02:42:50

使用JavaScript動畫HTML5進度條

回答

相關問題