如何制作间隔计时器？

Question

我有引导加载栏：

  <div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" id="loading" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  </div>
  </div>

我正在尝试每隔几秒钟更改一次条的宽度，以便看起来条正在取得进展。

我有这个，但是不起作用：

   setInterval(function () {
      var percentl = percentl + 5;
      document.getElementById("loading").style.width = percentl + "%";
  }, 1000);

Answer 1

你声明var percentl功能块，所以percentl在内部功能的范围内声明的唯一，每个函数被调用的值时percentl是不确定的，并设置好的为NaN后（如RobG在注释中说的）。 尝试这个：

var percentl = 0;
setInterval(function () {
  percentl = percentl + 5;
  document.getElementById("loading").style.width = percentl + "%";
}, 1000);

Answer 2

1）percentl在您的函数中具有局部作用域。 每次调用时，您都将其重新定义为相同的值。

将percentl设置为全局范围，每次调用匿名函数都可以访问它。

2）您也只调用一次setInterval。 您应该循环调用它，直到达到100％。 就像是：

var percentl = 0;


function increase(){

setInterval(function () {
      percentl = percentl + 5;
      document.getElementById("loading").style.width = percentl + "%";
      if(percentl < 100){
        increase();
      }
  }, 1000);
}

Answer 3

var i = 0;
function increase(){
    setInterval(function () {
        document.getElementById("loading").style.width = i + "%";
        i++;
        increase();
    }, 1000);
}