Javascript十六进制数在多个数字之间的插值

我正在为我的一个网站创建一个“剩余字符”类型计数器，并试图获得平滑的颜色过渡

如果我传递最大值（在本例中为300）和当前字符数（假设图案为绿色、黄色、橙色和红色），我将如何创建一个函数来获取颜色的十六进制值

这是用Javascript编写的。以下是我到目前为止的情况：

function commentcounter(val) {
max = 300;
if(val >= max){
    color = '#FF0000';
}else if(val > (max / 2)){
    color = '#FF9900';
}else{
    color = '#00FF00';
}
display = '<span style="color:' + color + '">' + val + '/' + max + '</span>';
document.getElementById('counter').innerHTML = display;
}

函数注释计数器（val）{
最大值=300；
如果（val>=max）{
颜色='#FF0000'；
}否则如果（val>（最大值/2））{
颜色='#FF9900'；
}否则{
颜色='#00FF00'；
}
显示=''+val+'/''+max+''；
document.getElementById（'counter'）.innerHTML=display；
}

---

如您所见，这并不是真正的插值，只是从绿色到橙色再到红色。

您需要从0到255（或反之亦然）分别插值每个颜色分量。

---

如果您使用

color:rgb（0，255，0）

“rgb（+Math.round（Math.min（（（chars+（max/2））*2/max）-1）255255））+”，“+Math.round（Math.min（（chars-2/max）+2）*255255））+”，0）”

对我来说，这比rgb（）更有效：

---

不错。我有点纯粹，你现在可能已经知道了嘿，对我来说，关掉不推荐使用的标签是可以的，除非你还在使用IE4。并分成3个部分，而不是2个：如果0var pct = val / max; var h = pct * 120; var newColor = 'hsl(' + h + ', 80%, 50%)';