如何显示从底部垂直进度条到顶部

问题描述：

我需要帮助，我怎样才能使一个进度条，当在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>

我觉得你用标签混淆了标题。请提供一个描述性标题。 – louisfischer

答

一个简单的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>

我希望这是对你有帮助。如果你想要显示的号码总是请问。但在我看来这会更好。

答

这是你期待的吗？

使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>

答

交换背景颜色和100高度添加到正面DIV。然后JS代码交换减去的总和。

如何显示从底部垂直进度条到顶部

相关推荐