Javascript 如何相对于输出的数字更改背景颜色？

所以，我想做一个温度转换器，但我想让Javascript改变相对于输出温度值的背景颜色。我一直在集思广益，但找不到一个方法来做到这一点

函数求解（）{
var option1=document.getElementById（'temp1'）；
var option2=document.getElementById（'temp2'）；
var temp1=option1.options[option1.selectedIndex].value；
var temp2=option2.options[option2.selectedIndex].value；
var from=document.getElementById（'inputValue'）；
var inputValue=from.value；
var-cel；
如果（温度1==（“摄氏度”））{
如果（温度2==（“摄氏度”））{
document.getElementById（“outputValue”）。value=inputValue+“°C”；
cel=输入值+摄氏度；
}否则如果（温度2==（“华氏”））{
document.getElementById（“outputValue”）.value=（parseFloat（inputValue）*9/5）+32+“°F”；
cel=输入值+摄氏度；
}否则，如果（温度2==（“开尔文”））{
document.getElementById（“outputValue”）.value=parseFloat（inputValue）+273.15+“K”；
cel=输入值+摄氏度；
}else if（temp2==（“rankine”））{
document.getElementById（“outputValue”）.value=（parseFloat（inputValue）+273.15）*9/5+“°R”；
cel=输入值+摄氏度；
}否则如果（temp2==（“reaumur”））{
document.getElementById（“outputValue”）.value=parseFloat（inputValue）*4/5+“°Ré”；
cel=输入值+摄氏度；
}else if（temp2==（“romer”））{
document.getElementById（“outputValue”）.value=（parseFloat（inputValue）*21/40）+7.5+“°Rø”；
cel=输入值+摄氏度；
}else if（temp2==（“delisle”））{
document.getElementById（“outputValue”）.value=（100-parseFloat（inputValue））*3/2+“De”；
cel=输入值+摄氏度；
}else如果（temp2==（“牛顿”））{
document.getElementById（“outputValue”）.value=parseFloat（inputValue）*33/100+“°N”；
cel=输入值+摄氏度；
}
}
}

您可以使用温度值映射到颜色值。颜色由三个通道（红色、绿色和蓝色）表示，它们包含0到255之间的值

我创建了一个fiddle，通过设置DOM元素的background-style属性来演示这种方法。

---

为了便于阅读，我简化了您的示例，并添加了一些自定义html来展示其工作原理

我的想法是创建和排列温度，其中第一个是应用颜色“蓝色”时低于的温度，第二个是应用颜色“红色”时高于的温度

在所有

if

之后，添加对

colorTemperature

函数的调用，并用温度填充

colorTemperatureChart

const colorTemperatureChart={
华氏温度：[
{值：32，颜色：'blue'}，
{值：86，颜色：'red'}
]
};
常量色温=（值，单位）=>{
if（色温Chart[单位][0]。值>值）{
document.getElementById（“outputValue”）.style.backgroundColor=colorTemperatureChart[unit][0]。颜色；
}else if（色温Chart[单位][1]。值<值）{
document.getElementById（“outputValue”）.style.backgroundColor=colorTemperatureChart[unit][1]。颜色；
}否则{
document.getElementById（“outputValue”）.style.backgroundColor='initial'；
}
}
常量solve=（）=>{
var option1=document.getElementById（'temp1'）；
var option2=document.getElementById（'temp2'）；
var temp1=option1.options[option1.selectedIndex].value；
var temp2=option2.options[option2.selectedIndex].value；
var from=document.getElementById（'inputValue'）；
var inputValue=from.value；
var-cel；
无功温度；
如果（温度1==（“摄氏度”））{
如果（温度2==（“华氏”））{
温度=（解析浮点（输入值）*9/5）+32；
document.getElementById（“outputValue”）.value=（parseFloat（inputValue）*9/5）+32+“°F”；
cel=输入值+摄氏度；
}
}
色温（温度，温度2）
}

摄氏度
华氏的










Solve

我的想法是使用'temp2'变量值动态更改颜色，因为您使用'temp2'来设置温度

函数求解（）{
var option1=document.getElementById（'temp1'）；
var option2=document.getElementById（'temp2'）；
var temp1=option1.options[option1.selectedIndex].value；
var temp2=option2.options[option2.selectedIndex].value；
var from=document.getElementById（'inputValue'）；
var inputValue=from.value；
var-cel；
//定义背景色
var colors=[{'Celsium'：'red'}、{'fahrenheit'：'orange'}、{'kelvin'：'yellow'}、{'rankine'：'green'}、{'reaumur'：'00000'}、{'delisle'：'cccccc'}、{'newton'：'DDDD'}]
如果（温度1==（“摄氏度”））{
如果（温度2==（“摄氏度”））{
document.getElementById（“outputValue”）。value=inputValue+“°C”；
cel=输入值+摄氏度；
}否则如果（温度2==（“华氏”））{
document.getElementById（“outputValue”）.value=（parseFloat（inputValue）*9/5）+32+“°F”；
cel=输入值+摄氏度；
}否则，如果（温度2==（“开尔文”））{
document.getElementById（“outputValue”）.value=parseFloat（inputValue）+273.15+“K”；
cel=输入值+摄氏度；
}else if（temp2==（“rankine”））{
document.getElementById（“outputValue”）.value=（parseFloat（inputValue）+273.15）*9/5+“°R”；
cel=输入值+摄氏度；
}否则如果（temp2==（“reaumur”））{
document.getElementById（“outputValue”）.value=parseFloat（inputValue）*4/5+“°Ré”；
cel=输入值+摄氏度；
}else if（temp2==（“romer”））{
document.getElementById（“outputValue”）.value=（parseFloat（inputValue）*21/40）+7.5+“°Rø”；
cel=输入值+摄氏度；
}else if（temp2==（“delisle”））{
document.getElementById（“outputValue”）.value=（100-parseFloat（inputValue））*3/2+“De”；
cel=输入值+”?
document.getElementById("tempInput").addEventListener("change", (event) => {
    var inputValue = parseFloat(event.target.value)
    var redColor = ( 255 * (inputValue / 100))
    var blueColor = 255 - redColor
  document.getElementById("container").style.background = `rgba(${redColor}, 0, ${blueColor})`
  document.getElementById("formatted").innerHTML = inputValue + ' ° C'
})

//redColor is counting up to 255 as the temperature rises
//blueColor is counting down from 255 to 0 as the temperature rises