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

Question

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

如果我传递了最大数字(在本例中为 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;
}

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

Answer 1

您需要从 0 到 255(或反之亦然)对每个颜色分量进行单独插值。
如果您使用 color: rgb(0, 255, 0)，这会容易得多。