Question

是否可以在JavaScript中构建进度条。

<div id="progress-bar" style="width:10%;">属性从0%开始到100%，持续10秒

在jQuery中有这么多解决方案，同时我找不到纯JavaScript的解决方案

任何建议非常感谢，谢谢

http://fiddle.jshell.net/5j6gf/

Answer 1

这里是jsfiddle：http://fiddle.jshell.net/5j6gf/1/

如何在javascript中制作动画的答案来自：https://stackoverflow.com/a/11213374/1524085

function animate(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

animate(
    document.getElementById('progress-bar'),
    "width","%",0,100,1000
);

Answer 2

您应该考虑使用CSS转换：

#progress-bar {
  width: 0%;
  -moz-transition: width 10s linear;
  -webkit-transition: width 10s linear;
  transition: width 10s linear;
}

然后

document.getElementById("progress-bar").style.width = "100%";

Answer 3

使用纯JavaScript可以实现jQuery中的所有功能。要么修复你的问题，要么在jQuery中找到它是如何完成的，并尝试用JS重写它。

您可以使用setTimeout或setInterval来及时增加宽度百分比。您还需要通过将宽度增加一个像素来使每次增加尽可能平滑，直到达到所需的宽度。

有数百种方法可以做到，找到适合你的方法。

如何使用PURE JavaScript构建加载栏？

3 个答案: