Question

我要做的事情基本上是让进度条在1秒内从值1-100开始。它并不取决于实际的过程状态。

到目前为止，这是我的努力，我不明白为什么它没有效果。

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

setInterval(function(){

             var pb = document.getElementById("progBar");

                            if (pb.value < 100){
                   pb.value = pb.value + 1;
                }


                },10);

关于如何实现这一目标的任何想法？

Answer 1

我建议您主要使用CSS来执行此操作。

div.progress-bar
{
    /* Your style attributes */

    transition: width 1s;
    -ms-transition: width 1s;
    -o-transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
}

然后在你的javascript中，将宽度设置为你想要的任何值。例如（使用jQuery）：

$('div.progress-bar').width('100%');

CSS会自动为其设置动画。

如果您希望支持旧浏览器（即＆lt; Internet Explorer 10），那么您必须在JavaScript中执行此操作。我推荐jQuery，因为它是为你处理的：

$('div.progress-bar').animate({width: "100%"}, 1000);

如果您不关心旧的浏览器支持，只需坚持使用CSS的方式。即使有CSS动画支持，jQuery仍然会使用JavaScript进行动画制作。

使用纯Javascript为进度标记设置动画效果？

1 个答案: