javascript - 如何从下到上显示垂直进度条

Question

我需要帮助 我如何在 window.onload 时制作进度条，它必须从下到上填充，在此代码中它反向工作

function move() {
  var elem = document.getElementById("myBar");   
  var height = 0;
  var id = setInterval(frame, 100);
  function frame() {
    if (height >= 70) {
      clearInterval(id);
    } else {
      height++; 
      elem.style.height = height + '%'; 
      elem.innerHTML = height * 1  + '%';
    }
  }
}
window.onload = move();

#myProgress {
  width:100px;
  background-color: red;
  height:100px
}

#myBar {
  width: 100px;
  background-color: #4CAF50;
  text-align: center;
  color: white;
}

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

Answer 1

一个简单的 CSS 方式如下。

function move() {
  var elem = document.getElementById("myBar");   
  var height = 0;
  var id = setInterval(frame, 100);
  function frame() {
    if (height >= 70) {
      clearInterval(id);
    } else {
      height++; 
      elem.style.height = height + '%'; 
      elem.innerHTML = height * 1  + '%';
    }
  }
}
window.onload = move();

#myProgress {
  width:100px;
  background-color: red;
  height:100px;
  position:relative;
}

#myBar {
  width: 100px;
  height: 0px;
  background-color: #4CAF50;
  text-align: center;
  color: white;
  position:absolute;
  bottom:0px;
}

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

希望对您有所帮助。如果您希望始终显示号码，请务必询问。但在我看来，这样会更好。