So ändern Sie die Farbprozente in RGB

Question

Ich habe meinen Farbcode 0-70 von grün bis rot erstellt. Jetzt möchte ich die Farben 0 - 70 von rot nach grün ändern.

function percentToRGB(percent) { 
 
    if (percent === 100) { 
 
     percent = 99 
 
    } 
 
    var r, g, b; 
 

 
    if (percent < 50) { 
 
     // green to yellow 
 
     r = Math.floor(255 * (percent/50)); 
 
     g = 255; 
 

 
    } else { 
 
     // yellow to red 
 
     r = 255; 
 
     g = Math.floor(255 * ((50 - percent % 50)/50)); 
 
    } 
 
    b = 0; 
 

 
    return "rgb(" + r + "," + g + "," + b + ")"; 
 
} 
 

 

 
function render(i) { 
 
    var item = "<li style='background-color:" + percentToRGB(i) + "'>" + i + "</li>"; 
 
    $("ul").append(item); 
 
} 
 

 
function repeat(fn, times) { 
 
    for (var i = 0; i < times; i++) fn(i); 
 
} 
 

 

 
repeat(render, 100);

li { 
 
    font-size:8px; 
 
    height:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul></ul>

Answer 1

Sie sollten nur in der Lage sein, die g und r Variablen zu wechseln um in der percentToRGB Funktion. Hier ist ein JSFiddle Link.

So würde die Funktion werden:

function percentToRGB(percent) { 
    if (percent === 100) { 
     percent = 99 
    } 
    var r, g, b; 

    if (percent < 50) { 
     // green to yellow 
     g = Math.floor(255 * (percent/50)); 
     r = 255; 

    } else { 
     // yellow to red 
     g = 255; 
     r = Math.floor(255 * ((50 - percent % 50)/50)); 
    } 
    b = 0; 

    return "rgb(" + r + "," + g + "," + b + ")"; 
}