本文介绍了基于动态值生成渐变步骤,包括小数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
根据此问题,其中有从值0..1的神话答案,我试图修改函数包括最小和最大值。
Based on this question, which has a fabulous answer for values from 0..1, I tried to modify the function to include the min and max values.
function getColor(value, min, max){ var hue=((max-(value-min))*120).toString(10); return ["hsl(",hue,",100%,50%)"].join(""); }它似乎对整数工作正常,但不是小数。例如,这些工作按预期工作:
It seems to work fine for whole numbers, but not so much for decimals. For instance, these work as expected:
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);最后一个实际上是蓝色... 这是一个小提琴。
The last one is actually blue... Here is a fiddle. How can I change this to work with all 4 scenarios?
推荐答案这看起来效果很好:
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(""); }编辑:根据以下评论进行调整
edit: adjusted based on comments below
更多推荐
基于动态值生成渐变步骤,包括小数
发布评论