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 + "%";
  }
}

使用JS中的计时器和进度条

2 个答案: