javascript - 从绿色到红色取决于百分比

Question

我有一个民意测验系统，我想为这个民意测验的答案着色。 例如:如果它是 10%，它将是红色，如果是 40%，它将是黄色，如果是 80%，它将是绿色，所以我希望我的 javascript 代码使用 rgb 颜色根据给定的百分比制作颜色。

function hexFromRGB(r, g, b) {
    var hex = [
        r.toString( 16 ),
        g.toString( 16 ),
        b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}  

现在我想要百分比的十六进制。

Answer 1

使用 HSL 和 fiddle 的简单方案:

function getColor(value){
    //value from 0 to 1
    var hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

根据需要调整饱和度和亮度。和一个 fiddle .

function getColor(value) {
  //value from 0 to 1
  var hue = ((1 - value) * 120).toString(10);
  return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
  var value = i / len;
  var d = document.createElement('div');
  d.textContent = "value=" + value;
  d.style.backgroundColor = getColor(value);
  document.body.appendChild(d);
}