我需要帮助 当 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>
一个简单的 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>
我希望这对您有帮助。如果您希望始终显示该号码，请询问。但在我看来，这样会更好。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
