根据数值自动背景颜色

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%)"
});