Question

我有一个div。我希望div的背景颜色根据值而改变。该值是摄氏温度。如果该值小于18，我希望颜色为蓝色。如果它大于23我想要颜色为红色。如果它介于18和23之间，我希望颜色在蓝色和红色之间淡化。如果它是20.5我不希望颜色是紫色。如果有意义，我希望它从蓝色变为白色再变为红色。或蓝色到绿色到红色（但绿色到红色的褪色可能是一种奇怪的颜色）。我正在考虑使用javascript / jquery来实现这个目标，但是不知道如何去做，并且在这里找不到类似的东西。

提前致谢：）

Answer 1

使用HSL代替RGB来表示您的颜色。

更改hue组件，您可以从一种颜色淡化到另一种颜色（如果您想要那种蓝绿红色的schame）。

否则，您可以使用lightness组件从一种颜色淡化为白色，然后从白色淡化为另一种颜色，如下所示：

const body = document.body;

document.getElementById('temperature').oninput = (e) => {

  const t = e.target.value;
  
  let hue;
  let lightness = 50;
  
  if (t < 18) {
    // If the value is less than 18,
    // I want the colour to be blue:
    
    hue = 200;
  } else if (t > 23) {
    // If its greater than 23,
    // I want the colour to be red:
    
    hue = 0;
  } else if (t < 20.5) {
    // Value in range [18, 20.5).
    // Should fade from blue to white:
    
    hue = 200;
    lightness = 50 + 50 * (t - 18) / 2.5;
  } else {
    // Value in range (20.5, 23].
    // Should fade from white to red:
    
    hue = 0;
    lightness = 50 + 50 * (23 - t) / 2.5;
  }

  body.style.background = `hsl(${ hue }, 100%, ${ lightness }%)`;
};

<input type="number" id="temperature" step="0.1" value="18"/>

注意你可以使用RGB来实现同样的目的，只需保持红色或蓝色成分固定，然后上升其他两个就可以将颜色淡化为白色。但是，我发现通常使用HSL来淡化/混合颜色会更容易。

Answer 2

您可以根据温度与其变化范围计算不透明度百分比......

我已经进行了自动演示（间隔时间）以免点击input ...

＆＃13;

$("#tempSelect").on("change",function(){
  var temp = parseFloat( $(this).val() );

  if(temp<18){
    opacity = 1;
    color="rgba(40,40,255,"+opacity+")";
  }

  else if(temp>18 && temp<20.5){
    opacity = 1-(temp-18)/2.5;
    color="rgba(40,40,255,"+opacity+")";
  }

  else if(temp>20.5 && temp<23){
    opacity = (temp-20.5)/2.5;
    color="rgba(255,40,40,"+opacity+")";
  }
  
  else if(temp>23){
    opacity = 1;
    color="rgba(255,40,40,"+opacity+")";
  }

  console.log(color);
  $("#tempDisplay").html(temp+"&deg;C").css({"background-color":color});
});

// On load, set a color.
$("#tempSelect").trigger("change");


// Just for the demo...

setInterval(function(){
  var tempInput = parseFloat($("#tempSelect").val())+0.1;
  $("#tempSelect").val(tempInput.toFixed(1)).trigger("change");
  if(parseFloat($("#tempSelect").val())>24){
    $("#tempSelect").val(17);
  }
},500);

＆＃13;

#tempSelect{
  width:6em;
}
#tempDisplay{
  width:4.5em;
  margin-top:4px;
  padding:6px;
  font-weight:bold;
  background-color:rgba(40,40,255,1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="tempSelect" type="number" step=0.1 value=17>
<div id="tempDisplay">0&deg;C</div>

＆＃13;

Answer 3

我刚刚做了一个简单的例子，可以帮助你开始。在示例中，您可以通过2个按钮更改当前温度。使用animate（）方法更改颜色，这将更改backgroundColor属性。 Click here为jsfiddle。

<html>
 <body>
  <div style="height:100px;width:300px;margin-bottom: 1em;background-color:white;"></div>
  <button id="plus" onclick="plusOneTemp()">
    Plus 1 degree celsius
  </button>
  <button id="minus" onclick="minusOneTemp()">
    Minus 1 degree celsius
  </button>
  <p>
    Value:
  </p>
 </body>
</html>

    var speed = 1000;
    var delay = 0;
    var temp = 25;


    function checkTemp() {
      if (temp < 18) { //change to blue
        $("div")
          .delay(delay)
          .animate({
            backgroundColor: "#64b5f6"
          }, speed);
      } else if (temp >= 18 && temp <= 23) { //change to orange
        $("div")
          .delay(delay)
          .animate({
            backgroundColor: "#ffb74d"
          }, speed);
      } else if (temp > 23) { //change to red
        $("div")
          .delay(delay)
          .animate({
            backgroundColor: "#ef5350"
          }, speed);
      }
    }
    $("#plus").click(function() {
      temp += 1;
      $("p").text("Value: " + temp);
      checkTemp();
    });
    $("#minus").click(function() {
      temp -= 1;
      $("p").text("Value: " + temp);
      checkTemp();
    });


    $("p").text("Value: " + temp);
    checkTemp();

根据值JavaScript淡化背景颜色

3 个答案: