Question

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

我只需要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/

使用JavaScript动画HTML5进度条

1 个答案: