Generuj kolory między czerwonym i zielonym dla zakresu wejściowego [duplikat]
Możliwy duplikat:
Kodowanie kolorami na podstawie numeru
Chcę, aby użytkownik mógł wybrać z zakresu od 1-100, gdzie liczby stają się mniejsze niż 50, kolor obszaru staje się ciemniejszy zielony, a gdy kolor staje się bliższy 100, kolor staje się bardziej czerwony .
Próbuję zrobić to tak, aby zakres w kierunku środka był zbliżony do białego (gdzie 50 = pełny biały).
Spróbowałem odpowiedzi tutaj:Wygeneruj kolory między czerwonym i zielonym dla miernika mocy? bezskutecznie ... 50 kończy się pomieszaną zielenią ...
Mam następujący html:
<span><span class="value">50</span><input type="range" /></span>
I następujący javascript:
$(document).on({
change: function(e) {
var self = this,
span = $(self).parent("span"),
val = parseInt(self.value);
if (val > 100) {
val = 100;
}
else if (val < 0) {
val = 0;
}
$(".value", span).text(val);
var r = Math.floor((255 * val) / 100),
g = Math.floor((255 * (100 - val)) / 100),
b = 0;
span.css({
backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
});
}
}, "input[type='range']");
Skrzypce:http://jsfiddle.net/maniator/tKrM9/1/
Wypróbowałem wiele różnych kombinacji r, g, b, ale naprawdę nie wydaje mi się, aby było dobrze.