0
如何创建颜色根据百分比更改的进度条 我想根据给定的值来更改颜色条的颜色以平滑更改(js & css)如何创建颜色根据百分比变化的进度条
例如:
<style>
#myBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #ff0000;
text-align: center;
line-height: 30px;
color: white;
border-radius: 1em;
animation: color 2s linear 0s alternate;
}
@keyframes color{
0% {background-color: #0f0;}
50% {background-color: #ff0;}
100% {background-color: #f00;}
}
</style>
该代码在index.php文件:
0%=绿色,100%=红色,75%=橙 该代码在CSS(红色和绿色之间的梯度)<script>
function move() {
var elem = document.getElementById("myBar");
var newElem = document.getElementById("percent");
var height = 1;
score = <?php echo($percentation);?>;
var id = setInterval(frame, 25);
function frame() {
if (height >= score) {
clearInterval(id);
} else {
height++;
elem.style.height = height + '%';
newElem.innerHTML = height + '%';
}
}
}
</script>
myBar是承重横条本身的DIV %的是DIV输出值