使用 JavaScript 动画 HTML5 进度条

Question

我正在尝试做一个简单的 HTML5 进度条。当用户单击一个按钮时，我希望它（onclick）开始动画，以便它在三秒内从 0-100（满）。它应该是一些非常基本的 Javascript，我希望将其放入文档的头部。

与此非常相似： 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]">

Answer 1

您所需要的只是您发布的问题中的这个示例： 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/