如何随着进度条的增长更改颜色

Question

I want to change my progress bar's color as it progresses with javascript here is my javacsript code:

pass.addEventListener('keydown', function() {

    if(pass.value.length === 0){
        myMsg.style.color = 'black';
        myMsg.innerText = "Null";
        strength.value = 0;
    }
    else if(pass.value.length < 4){
        myMsg.style.color = '#FF4A56';
        myMsg.innerText = 'Too Short!';
        strength.value = 20;
        strength.style.background.color = '#FF4A56';
    } 
    else if(pass.value.length < 8) {
        myMsg.style.color = '#FF4A56';
        myMsg.innerText = 'Good!';
        strength.value = 40;
    } 
    else if(pass.value.length <= 10) {
        myMsg.style.color = '#45DE05';
        myMsg.innerText = "Better!";
        strength.value = 60;
    } 
    else if(pass.value.length <= 12) {
        myMsg.style.color = '#44cc0a';
        myMsg.innerText = "Even Better!";
        strength.value = 80;
    }
    else if(pass.value.length <= 14) {
        myMsg.style.color = 'green';
        myMsg.innerText = "Best!";
        strength.value = 100;
    }

});

Answer 1

This code is change background with color every 20%.

 function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 100); function frame() { if (width >= 100) { clearInterval(id); } else { if(width >= 21 && width <= 40) { document.getElementById("myBar").style.backgroundColor = "yellow"; elem.innerHTML = 'Good!'; } else if(width >= 41 && width <= 60) { document.getElementById("myBar").style.backgroundColor = "blue"; elem.innerHTML = 'Better!'; } else if(width >= 61 && width <= 80) { document.getElementById("myBar").style.backgroundColor = 'violet'; elem.innerHTML = 'Even Better!'; } else if(width >= 81 && width <= 100) { document.getElementById("myBar").style.backgroundColor = "green"; elem.innerHTML = 'Best!'; } else if(width >= 1 && width <= 20) { document.getElementById("myBar").style.backgroundColor = "red"; elem.innerHTML = 'Short!'; } elem.style.width = width + '%'; // elem.innerHTML = width * 1 + '%'; width++; } } } 

 #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 0%; height: 30px; background-color: red; text-align: center; line-height: 30px; color: #000; } 

 <div id="myProgress"> <div id="myBar">0%</div> </div> <br> <button onclick="move()">Click Me</button> 

If you wish to change the color, you change the name of the color here,

document.getElementById("myBar").style.backgroundColor = "new-color";

instead of

document.getElementById("myBar").style.backgroundColor = "yellow";

Answer 2

 #bar { border: 1px solid black; height: 16px; } #progress { background-color: dodgerblue; height: 100%; width: 0; } button { display: block; margin: auto; margin-top: 16px; } 

 <div id="bar"> <div id="progress"></div> </div> <button onclick="startProgress()">Start</button> <script> var progress = document.getElementById("progress"); var width = 0; var startProgress = function startProgress() { width++; if (width > 75) { progress.style.backgroundColor = "gold"; } else if (width > 50) { progress.style.backgroundColor = "orangered"; } else if (width > 25) { progress.style.backgroundColor = "yellowgreen"; } progress.style.width = width + "%"; if (width < 100) { window.requestAnimationFrame(startProgress); } else { window.cancelAnimationFrame(startProgress) } }; </script>