Автоматические цвета фона в соответствии с числовыми значениями

Question

Контекст

Я ищу способ сделать автоматические цвета фона в соответствии с числовыми значениями.

В моем примере, цвета варьируются от зеленого до красного в зависимости от процентов:

Вопрос

Мне просто нужно CSS или мне также нужно JavaScript ?

Пример

Вы можете использовать эту разметку: http://jsfiddle.net/3J3Yb/1/.

Answer 1

Взлет из решения Иосифа:

Красный - (255,0,0); желтый (255,255,0); зеленый (0,255,0). Поэтому, если вы хотите, чтобы ваша градация проходила через желтый, вам нужно постепенно увеличивать зеленый до 100%, а затем уменьшать красный до 0.

http://jsfiddle.net/mblase75/Xw3JL/1

$(".percentVals td").each(function(){
    var r = Math.min(100,parseInt(this.innerHTML,10)*2);
    var g = Math.min(100,200-parseInt(this.innerHTML,10)*2);
    this.style.backgroundColor = "rgb(" + r + "%," + g + "%,0%)"
});

Answer 2

Вы имеете в виду нечто подобное?

http://jsfiddle.net/Xw3JL/

Требуется настройка, хотя

Answer 3

Если вы хотите сделать это исключительно в CSS, вы должны дать им все классы в соответствии с их процентом:

<table>
    <tr>
        <td class="level-100">100%</td>
        <td class="level-90">90%</td>
        <td class="level-80">80%</td>
        <td class="level-70">70%</td>
        <td class="level-60">60%</td>
        <td class="level-50">50%</td>
        <td class="level-40">40%</td>
        <td class="level-30">30%</td>
        <td class="level-20">20%</td>
        <td class="level-10">10%</td>
        <td class="level-0">0%</td>
    </tr>
</table>

Таким образом, вы можете оформить их с помощью простого CSS:

.level-100      { background-color: #E50012; }
.level-90       { background-color: #E11900; }
.level-80       { background-color: #DD4500; }
.level-70       { background-color: #D96F00; }
.level-60       { background-color: #D59700; }
.level-50       { background-color: #D2BE00; }
.level-40       { background-color: #B8CE00; }
.level-30       { background-color: #8DCA00; }
.level-20       { background-color: #63C600; }
.level-10       { background-color: #3AC200; }
.level-0        { background-color: #14BF00; }

Вот скрипка: http://jsfiddle.net/3J3Yb/4/

Answer 4

Выполнение этого с помощью CSS звучит так, как будто вам придется писать гораздо больше кода, поэтому я бы порекомендовал использовать JS для этого.

Вот пример красной градации: http://jsfiddle.net/3J3Yb/3/

И JS:

$('td').each(function(){
    var $this = $(this);
    var decimal = parseInt($this.text(),10) / 100;
    var red255 = Math.round(255 * decimal)
    $this.css('background-color','rgb(' + red255 + ',0,0)');
});

И это даст вам все возможные цвета с интервалом смены цвета 17 (это 15 различных значений цвета для каждого r, g, b - 255/17 = 15): http://jsfiddle.net/3J3Yb/6/

Это только плавный градиент в группах по 15, потому что только в группах по 15 два цвета остаются постоянными. Код довольно прост:

var tr = $('tr');

for(var r = 0; r < 256; r+=17){
    for(var g = 0; g < 256; g+=17){
        for(var b = 0; b < 256; b+=17){
            var rgb = r+','+g+','+b;
            tr.append('<td style="background:rgb('+rgb+')"></td>');
        }
    }
}

Answer 5

Не уверен, что это можно сделать автоматически, но я думаю, что вы можете жестко закодировать что-то вроде 100% до 90% = зеленый, от 90% до 80% = желтый.

Этот веб-сайт делает автоматический градиент с числомшага, который вы хотите: http://www.perbang.dk/rgbgradient/

Надеюсь, это поможет вам:)