如何顯示從底部垂直進度條到頂部

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％，然後按百分比降低。

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();

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

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

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

Answer 3

交換背景顏色和100高度添加到正面DIV。然後JS代碼交換減去的總和。