HTML5进度条动画答案

【问题标题】：HTML5 progress bar animationHTML5进度条动画
【发布时间】：2012-06-18 07:44:25
【问题描述】：

我在我的应用程序中使用 HTML5 进度条。我想知道是否有任何方法可以控制进度条的动画速度。我想在某个时间间隔后显示进度，我使用 javascript 的 setTimeout 方法来设置屏幕渲染后的值。但是动画太快了。有没有办法控制它？

谢谢。

【问题讨论】：

代码在哪里...................................... .........
哪个 HTML5 进度条？在这里提问之前您尝试过什么？

标签： html progress-bar

【解决方案1】：

我不确定我理解您所说的“动画”是什么意思，但这里有一个在控制进度速度的同时使用进度条的示例：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);
});

【讨论】：

【解决方案2】：

这里是例子。 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>

【讨论】：

【解决方案3】：

Mantas 上面的答案看起来不错并且有效（无需使用 jQuery），但我想知道我们是否也可以使用 setTimeout 函数？ 100 次迭代后退出的递归函数中的 setTimeout 是否也有效？从上面复制 Mantas 的代码并稍作改动：

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>

【讨论】：