javascript - 在 JS 中使用计时器和进度条

Question

我正在尝试创建一个简单的脚本，用户单击一个按钮，进度条慢慢填充到 100%（我知道令人兴奋吗？）

所以我把这个片段设置为我的计时器：

this.updateBar = setInterval(function () { that.update(); }, 50);

我遇到的问题是正确编写方法，以便进度条慢慢填满。我很明显有逻辑错误，但我太深了，我看不到它们。这就是我所拥有的，显然是不完整的，但甚至没有让我开始着手。

ProgressBar.prototype.update = function () {
   if(this.bar.style.width == "0%")
   {
       this.bar.style.width = "20%";
   }

}

谢谢你！

Answer 1

在 ProgressBar 构造函数中，添加：

this.progress = 0;

然后将更新函数更改为：

ProgressBar.prototype.update = function () {
    this.progress++; 
    this.bar.style.width = this.progress + "%";
}

Answer 2

你有一个好的开始。在我看来，50 毫秒的更新间隔相当快，我建议接近 500 毫秒。但是对于您的功能，像这样的增量可能会更好：

ProgressBar.prototype.update = function () {
  current = this.bar.style.width.split('%')[0];
  if(current !>= 100) {
    current = current + 20;
    this.bar.style.width = current + "%";
  }
}