javascript - 使用 jQuery 和 CSS 的进度条

Question

这是我使用的 HTML:

<progress id="amount" value="0" max="100"></progress>

这是我使用的 JavaScript:

<script>
for (var i = 0; i < 240; i++) {
    setTimeout(function () { // this is 8 minutes progressbar
        var t = Math.floor((i / 240) * 100);
        $('#amount').attr('value', t);
    }, 2000);
}
</script>

问题是第一秒数值直接跳到100%

请帮忙 提前致谢

Answer 1

你意识到 for 每次提高它的速度都会设置你的计时器，是吗？而且速度非常快，你甚至察觉不到。 实际上没有必要，你的定时器已经用来循环了。将其删除。

<script>
     var i = 0;
     var timer = setInterval(function () { // this is 8 minutes progress bar
        if(i<240) { 
            i++;
            var t = Math.floor((i / 240) * 100);
            $('#amount').attr('value', t);
        } else {
            clearInterval(timer);
            timer=null;
        }
    }, 2000);

</script>