Question

给定一个带有数组参数的函数，其中第一个数字是延迟时间，而width属性是填充条形的数量：

var barFill = new AnimationSequence(bar, [
  [100, { width: '10%' }],
  [200, { width: '20%' }],
  [200, { width: '50%' }],
  [200, { width: '80%' }],
  [300, { width: '90%' }],
  [100, { width: '100%' }]
]);
barFill.animate();

我试图编写一个函数来获取这两个参数并为进度条的填充设置动画。到目前为止，我有这个功能：

function AnimationSequence() {
var elem = document.getElementById("myBar");   
var width = 10;
var id = setInterval(frame, 10);
function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}

这是当前的JSFIDDLE：link

Answer 1

好的......你的代码有什么问题：

您在html中定义了onclick - 请不要这样做。使用JS附加监听器
你正在解雇＆＃39; showProgress＆＃39;哪个不存在
您正在使用＆＃39; new＆＃39;运营商。您只应在想要创建给定＆＃39; class＆＃39;的新实例时使用它。（JS没有真正的类），在这种情况下 - 你只想执行函数。
你正在使用setInterval当你真正想要的是setTimeout（或者至少我是这么认为）
你想要在没有requestAnimationFrame的情况下为元素添加动画效果 - 这基本上是个糟糕的主意，但你可以这样做。

我附上小提琴，它可以做你想要的（或者至少我是这么认为），但要注意这样一个简单的事情应该用CSS完成。如果您不关心进程的实际进度，并且您只想向用户显示进度条，而不是使用CSS转换（我已经在代码片段中完成了它），并触发将宽度设置为100％的类，点击按钮。

Theres json.loads allows duplicate keys in a dictionary, overwriting the first value为你。

用于根据其他功能设置进度条动画的功能

1 个答案: