如何顺利运行html中的进度条线

Question

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var counter = 1;
  var id = setInterval(frame, 1000);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 1; 
      elem.innerHTML = counter++;
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 0px;
  height: 10px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">0</div>
</div>
<br>
<button onclick="move()">Click Me</button>

在上面的 sn-p 中有一个进度条，当单击按钮时会自动填充，它会通过添加 style.width 来填充进度条1。我希望该进度条能够顺利填充，但毫秒应保持不变，即 1000 。

Answer 1

您可以渲染的最小单位是像素。

您可以做的是检查某个反转以增加宽度。在下面的示例中，我将宽度增加了 10px，以便您可以正确看到 transition

function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var counter = 0;
  var id = setInterval(frame, 600);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      counter++
      console.log(counter);
      if(counter % 5 == 0)
      {
        width += 10; 
        elem.style.width = width + 'px'; 
      }
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}
#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;      
}

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

Answer 2

添加transition:width 600ms linear;到

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  transition:width 600ms linear;
}

这将平滑地为栏的宽度设置动画。

注意：保持过渡时间等于 setInterval 超时，以避免动画抖动

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var counter = 1;
  var id = setInterval(frame, 1000);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 1; 
      elem.innerHTML = counter++;
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  transition:width 1000ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

CSS 中的过渡可以在 2 个值之间进行平滑插值。 这意味着当您将宽度增加 1px 时，浏览器将通过动画来增加宽度，这仅在执行增加宽度的 javascript 代码后才会发生。

Answer 3

您可以使用trasition 并减少间隔时间

function move() {
  var elem = document.getElementById("myBar");   
  var width = 2;
  var id = setInterval(frame, 1);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 2; 
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
  transition: width 2s;
}

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

Answer 4

如何调整 JavaScript 代码以获得所需的结果：

function move() {
  var elem = document.getElementById("myBar");
  var width = 0.5;
  // change the milliseconds to 10 or 5 to fill it relatively faster
  var id = setInterval(frame, 20);

  function frame() {
    if (width >= 120) {
      clearInterval(id);
    } else {
      width += 0.5;
      elem.style.width = width + 'px';
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>