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)，这将更容易。

Answer 2

“RGB（” + Math.round（Math.min（（（（字符+（最大值/ 2））* 2 /最大值）-1）的 255255））+ “” + Math.round（数学.min（（（字符 -2 /最大值）2）* 255,255））+ “0）”;

Answer 3

这对我来说比rgb（）效果更好：

var pct = val / max;
var h = pct * 120;
var newColor = 'hsl(' + h + ', 80%, 50%)';

http://jsfiddle.net/ehUHp/

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

3 个答案: