如何在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>

在上面的代码片段中，有一个渐进式条，该渐进式条将在单击按钮时自动填充，并通过将style.width加1来填充该条。我希望该进度条能够平滑填充，但毫秒数应保持不变，即1000。

Answer 1

将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 2

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

您可以做的是检查一定的间隔以增加宽度。在下面的示例中，我将宽度增加了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 3

如何调整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>

Answer 4

您可以使用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>