JavaScript-如何以编程方式计算颜色？

在JavaScript/jQuery应用程序中，我想基于外部变量设置div元素的颜色。从该变量的低值到高值，经过绿色到红色。现在，我可以这样做：

setColor: function(quantity)
{
    var color;
    if(quantity <= -1000)
    {
       color = '#00ff00'
    }
    else if(quantity > -1000 && quantity <= -900)
    {
       color = '#11ee00'
    }

    // a million more else if statements

    return color;
} 

setColor:函数（数量）
{
颜色变异；
如果（数量-1000&&quantity首先，最好将装饰逻辑（颜色值）分开，为不同的颜色设置类，并将它们设置为
div
。
我有一个类似的任务，使用每个通道的不同振幅、周期和位移的每个通道的正弦函数：

var ColorPicker = {

  colors: {},


  init: function(range){
    var ra = 190,
      rp = 8/3*range,
      rs = range*2/3;

    var ga = 190,
      gp = range,
      gs = 0;

    var ba = 150,
      bp = 8/3*range,
      bs = range;

    var pipi = 2*Math.PI;
    var r, g, b, w;

    for (var i = 0; i < range; i++) {
      r = ra*Math.cos(i*pipi/rp + rs*pipi/range);
      g = ga*Math.cos(i*pipi/gp + gs*pipi/range);
      b = ba*Math.cos(i*pipi/bp + bs*pipi/range);

      r = Math.round( ( r > 0 ) ? r : 0 );
      g = Math.round( ( g > 0 ) ? g : 0 );
      b = Math.round( ( b > 0 ) ? b : 0 );
      w = Math.round( i/range*255);

      this.colors[i] = {red: r, green: g, blue: b, white: w};   
    };
  },


  getColorObj: function(grade){
    return this.colors[grade];
  },

  getRGB: function(grade, coef){
    var o = this.colors[grade];
    if (!coef){
      coef = 1;
    }
    var r = (Math.round(o.red*coef)>255)?255:Math.round(o.red*coef),
      g = (Math.round(o.green*coef)>255)?255:Math.round(o.green*coef),
      b = (Math.round(o.blue*coef)>255)?255:Math.round(o.blue*coef);
    return 'rgb(' + r + ','
            + g + ',' 
            + b + ')'; 
  },

  // get shades of BW
  getW: function(grade){
    var o = this.colors[grade];
    return 'rgb(' + o.white + ','
            + o.white + ',' 
            + 0.9*o.white + ')'; 
  },

  // opposite to BW
  getB: function(grade){
    var o = this.colors[grade],
      b = 255 - o.white;
    // console.log(b);
    return 'rgb(' + b + ','
            + b + ',' 
            + .9*b + ')'; 
  },

};

var颜色选择器={
颜色：{}，
初始化：函数（范围）{
var ra=190，
rp=8/3*范围，
rs=范围*2/3；
var ga=190，
gp=范围，
gs=0；
var ba=150，
bp=8/3*范围，
bs=范围；
var pipi=2*Math.PI；
var r，g，b，w；
对于（变量i=0；i0）？r:0）；
g=数学四舍五入（（g>0）？g:0）；
b=数学四舍五入（（b>0）？b:0）；
w=数学四舍五入（i/范围*255）；
颜色[i]={red:r，green:g，blue:b，white:w}；
};
},
getColorObj:函数（等级）{
退回这个。颜色[等级]；
},
getRGB：功能（等级，coef）{
var o=该颜色[等级]；
if（！coef）{
coef=1；
}
变量r=（数学圆整（o.red*coef）>255）？255：数学圆整（o.red*coef），
g=（数学圆整（o.green*coef）>255）？255：数学圆整（o.green*coef），
b=（数学圆整（o.blue*coef）>255）？255：数学圆整（o.blue*coef）；
返回'rgb（'+r+'，'
+g+'，'
+b+）'；
},
//得到BW的阴影
getW：功能（等级）{
var o=该颜色[等级]；
返回'rgb（'+o.white+'，'
+o.white+，'
+0.9*o.white+）'；
},
//与BW相反
getB：功能（等级）{
var o=此。颜色[等级]，
b=255-o.white；
//控制台日志（b）；
返回'rgb（'+b+'，'
+b+'，'
+.9*b+）'；
},
};

但可能需要重写。现在不要认为这是一个最佳解决方案。
有一个名为的颜色处理库。
你要做的是改变色调。这将是这样做的：

var red = tinycolor("#FF0000").toHsv();
var green = tinycolor("#00FF00").toHsv(), h, col, hex;

h = green.h + (red.h-green.h)*(quantity+1000)/2000;
col = tinycolor({h: h, s: 0.5, v: 0.5});
hex = col.toHex();

 
 < P>“一个稍微更红的绿荫”变成黄色，因为红色和绿色中间的颜色是黄色的。因此，当值为上限时，该函数返回一个纯绿色的RGB字符串，当值为中间值时为黄色（在你的情况下为0），并且所有的色调介于两者之间。

var low = -1000, upp = 1000,
    mid = (upp + low) / 2, dif = (upp - low) / 2;

function grade(value) {
    var r = 255, g = 255, b = 0;
    if (value <= low) r = 0;
    else if (value >= upp) g = 0;
    else if (value < mid) r = Math.round(255 * Math.abs(low - value) / dif);
    else if (value > mid) g = Math.round(255 * Math.abs(upp - value) / dif);
    return  'rgb(' + r + ',' + g + ',' + b + ')';
}

var-low=-1000，upp=1000，
中期=（upp+低）/2，dif=（upp-低）/2；
功能等级（值）{
var r=255，g=255，b=0；
如果（值=upp）g=0；
如果（值中间值）g=Math.round（255*Math.abs（upp-value）/dif）；
返回'rgb（'+r+'、'+g+'、'+b+'）；
}

根据您的使用情况调整VAR
low
和
upp
。该功能很容易适应绿色/青色/蓝色或红色/紫色/蓝色之间的颜色变化。如果您需要一个完整的彩虹，则需要更多的努力。
这个变量与颜色有什么关系？
0
=
f00
，
1000000
=
0f0
？（或者不管最高的数字是什么…）呜呜声。让我们假设-1000或以下的是#00ff00（绿色），而+1000或以上的是#ff0000（红色），0是#ffff00（黄色）。RGB颜色由3个颜色通道组成：R（0-255）、G（0-255）、B（0-255）。因此您可以只做：
RGB（数量和255，（数量>>8）&255，（数量>>16）&255）
您有一个用于计算0到16581375之间颜色的函数。将这些知识应用到您的值中，并生成一个函数，因为它很容易。您可以使用css
rgb
或
rgba
表示法。例如
rgb（0，255，0）
颜色是一个实心色带，还是希望根据
0
和
-1000
之间的距离设置渐变？