javascript - 使用 Javascript/jQuery 根据 Text Value 修改 CSS

Question

OK Stackoverflowians，这是今天的谜语。

我在一个 WordPress 网站上有一个天气侧边栏小部件，它从 Google Weather API 获取所有数据。我想设置一个从 RED 到 BLUE 的渐变，然后通过 javascript 之神的魔法来查看温度值。

较高的数字 = 更接近红色
较低的数字 = 接近蓝色

有什么可以做到这一点吗？还是我必须从头开始？

Answer 1

您可以使用这样的两个维度来表达颜色：

var max_temp = 50, // set maximum expected temperature
min_temp = -10, // set minimum temperature
temp_range = max_temp - min_temp, // calculate range
temp_rating = ((temp - min_temp) / temp_range) * 255 // express value in terms of the range multiplied by 255
red = temp_rating, // more temp = more red
blue = 255 - temp_rating; // more temp = less blue

然后你的 CSS 颜色会变成：

rgb(red, 0, blue)

不知道它是否看起来不错;-)

Answer 2

您可以使用jQuery执行此操作：

$(document).ready(function(){
    $('#temp')​.change(function(){
        if($(this).val() < 47)
            $(this).removeAttr("class").addClass("cold");
        else
            $(this).removeAttr("class").addClass("hot");
    })​;
});

CSS

​.hot {background: #f00; color: #fff;}
.cold {background: #00f; color: #fff;}

HTML

​<input type="text" id="temp"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ />​​​​​​​​​​​​​​​

希望这可以帮助！仅供参考，小提琴。或者，您也可以使用.keyup()函数！:)

Answer 3

这是一个改编自我为 JavaScript 热图图表生成颜色的类似实现的JSFiddle 。

您传入一个值、一个最小值和一个最大值来定义一个范围，然后根据脚本中定义的第一个、最后一个和中点颜色进行插值并生成一个十六进制值。这从红色变为绿色，范围为 0 - 50，但它也通过提供最极端的颜色来处理超出范围的值。也许您可以修改它以满足您的要求？