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

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>

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

Answer 2

这是你期待的吗？

将myBar高度设为100％，然后按百分比减少。

＆＃13;

＆＃13;

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 = (100 - height) + '%'; 
      elem.innerHTML = height * 1  + '%';
    }
  }
}
window.onload = move();

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

交换背景颜色并为正面DIV添加100个高度。然后JS代码将总和交换为减号。