如何从下到上显示垂直进度条 [英] How to show a vertical progress bar from bottom to top

问题描述

我需要帮助，当window.onload必须从下往上填充时，如何制作进度条，在此代码中，它的工作原理是相反的

I need help How can i make a progress bar when the window.onload, it has to fill from bottom to top, in this code it works reverse

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>

推荐答案

一种简单的CSS方式如下.

A simple CSS way would be as following.

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>

我希望这对您有所帮助.如果您希望始终显示该数字，请询问.但是我认为这样会更好.

I hope this was helpful for you. If you want the number to be shown always please do ask. But in my view this would be better.

这篇关于如何从下到上显示垂直进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！