JavaScript中使用十六进制颜色值实现温度联动变色问题求助

核心问题 #

1. 未将颜色值定义为字符串：你数组里的ff0000、b2004c等没有用引号包裹，JavaScript会将它们视为未定义的变量，直接运行会抛出ReferenceError。
2. 缺少十六进制颜色前缀：CSS的background-color识别十六进制颜色时，必须以#开头，否则无法解析。

修正后的代码 #

<html>
    <head>
         <style>
            #cool{
                background-color:lightblue;
                float:left;
            }
            
            #hot{
                background-color:red;
                float:right;
            }
            
            button{
                width:200px;
                height:100px;
                font-size:20pt;
            }
            
            #range{
                width:100%;
                height:50px;
                background-color:#ff0000;
            }
         </style>
    </head>
    
    <body>
        <div id="range">   </div>
        <button id="hot" type="button" onclick="tempUp()"> hot  </button>
        <button id="cool" type="button" onclick="tempDown()"> cool </button>
        
    </body>
    
    <script>
        // 给每个颜色值加上引号和#前缀
        var colorVal = ["#ff0000","#b2004c","#5900a6","#0000ff"]; //from red to blue
        var i = 0; //default value
        
        function tempUp(){
            if(i < 3){
                i++;
                document.getElementById('range').style.backgroundColor = colorVal[i];
            }
         }
         
         function tempDown(){
            if(i > 0){
                i--;
                document.getElementById('range').style.backgroundColor = colorVal[i];
            }
         }
    </script>
</html>

进阶优化：平滑颜色过渡 #

如果想实现更自然的温度-颜色联动（而非固定几个颜色节点），可以通过计算RGB分量实现渐变：

<html>
    <head>
         <style>
            #cool{
                background-color:lightblue;
                float:left;
            }
            
            #hot{
                background-color:red;
                float:right;
            }
            
            button{
                width:200px;
                height:100px;
                font-size:20pt;
            }
            
            #range{
                width:100%;
                height:50px;
                background-color:rgb(255, 0, 0);
            }
         </style>
    </head>
    
    <body>
        <div id="range">   </div>
        <button id="hot" type="button" onclick="tempUp()"> hot  </button>
        <button id="cool" type="button" onclick="tempDown()"> cool </button>
        
    </body>
    
    <script>
        // 温度范围设为0-100，对应从蓝到红
        var temp = 100;
        updateColor();
        
        function tempUp(){
            if(temp < 100){
                temp += 10;
                updateColor();
            }
         }
         
         function tempDown(){
            if(temp > 0){
                temp -= 10;
                updateColor();
            }
         }
         
         function updateColor(){
             // 温度越高，红色分量越高，蓝色分量越低
             const red = Math.floor((temp / 100) * 255);
             const blue = Math.floor(((100 - temp) / 100) * 255);
             document.getElementById('range').style.backgroundColor = `rgb(${red}, 0, ${blue})`;
         }
    </script>
</html>

内容的提问来源于stack exchange，提问作者Sepehr