根据数值自动设置背景颜色

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

不确定是否可以自动执行，但我认为您可以硬编码 100% 到 90% = 绿色，90% 到 80% = 黄色。

这个网站用你想要的步数自动渐变：http://www.perbang.dk/rgbgradient/

希望对你有帮助:)

Answer 4

如果你想纯粹用 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 5

通过 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（即每个 r、g、b 有 15 个不同的颜色值——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>');
        }
    }
}