Javascript 基于动态值（包括小数）生成梯度步长

基于，它有一个，我试图修改函数以包含最小值和最大值

function getColor(value, min, max){
    var hue=((max-(value-min))*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

它似乎适用于整数，但不适用于小数。例如，这些工作符合预期：

var value=42;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,42,100);
document.body.appendChild(d);

var value=42;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be red)";
d.style.backgroundColor=getColor(value,0,42);
document.body.appendChild(d);

但这些并不是：

var value=0.1;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,0,90);
document.body.appendChild(d);

var value=0.1;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,0,5);
document.body.appendChild(d);

---

最后一个其实是蓝色的。如何将其更改为适用于所有4种场景？

这似乎非常有效：

function getColor(value, min, max){
    if (value > max) value = max;
    var v = (value-min) / (max-min);
    var hue=((1 - v)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

---

编辑：根据下面的评论进行调整这似乎效果很好：

function getColor(value, min, max){
    if (value > max) value = max;
    var v = (value-min) / (max-min);
    var hue=((1 - v)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

---

编辑：根据下面的注释进行调整

我认为您的代码不正确，函数需要1-0之间的标准化值，因此只需确保您的输入值根据最小值/最大值在1-0之间进行标准化。然后只需向函数输入该值即可。你能详细说明一下吗<代码>变量v=（最小值）/最大值应始终为1-0之间的值，否？为什么我要在函数之外做更多的计算呢？根据上面关于规范化的回答。这个公式是不正确的。虽然它近乎正确，但它并不完全正确。例如，如果输入的值等于max，则不会得到1。例如：min=4，max=1000，value=1000，v=>0.996，但应该是从max开始的1subtract min？是的，这是正确的：D昨天没有意识到它这么简单。我认为你的代码不正确，函数期望一个1-0之间的标准化值，因此，只需确保您的输入值根据最小值/最大值在1-0之间进行规范化，然后将该值输入函数即可。你能详细说明一下吗<代码>变量v=（最小值）/最大值应始终为1-0之间的值，否？为什么我要在函数之外做更多的计算呢？根据上面关于规范化的回答。这个公式是不正确的。虽然它近乎正确，但它并不完全正确。例如，如果输入的值等于max，则不会得到1。例如：min=4，max=1000，value=1000，v=>0.996，但应该是max的1子域min？是的，这是正确的：D昨天没有意识到它这么简单。