2

シンプルな HTML5 プログレス バーを作成しようとしています。ユーザーがボタンをクリックすると、3 秒で 0 から 100 (フル) になるように (onclick) アニメーションを開始します。ドキュメントの先頭に挿入しようとしているのは、本当に基本的な Javascript である必要があります。

これと非常によく似ています: HTML5 プログレス バー アニメーション

onload の代わりに onclick とボタンが必要です。これは単なる標準の 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]">
4

1 に答える 1

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/

于 2012-08-17T02:18:54.380 に答える