Fade Hintergrundfarbe je nach Wert JavaScript

-2

Ich habe ein Div. Ich möchte die Hintergrundfarbe des Divs abhängig von einem Wert ändern. Der Wert ist die Temperatur eines Raumes in Celsius. Wenn der Wert kleiner als 18 ist, möchte ich, dass die Farbe blau ist. Wenn es größer als 23 ist, möchte ich die Farbe rot sein. Wenn es zwischen 18 und 23 ist, möchte ich die Farbe zwischen blau und rot verblassen lassen. Wenn es 20.5 ist, möchte ich nicht, dass die Farbe lila ist. Ich möchte, dass es von Blau nach Weiß zu Rot übergeht, wenn das Sinn macht. Oder blau zu grün zu rot (aber die grün zu rot Fade könnte eine seltsame Farbe sein). Ich dachte über die Verwendung von Javascript/Jquery, um dies zu erreichen, aber nicht wissen, wie es geht und konnte hier nichts finden, das ähnlich war.Fade Hintergrundfarbe je nach Wert JavaScript

Vielen Dank im Voraus :)

Quelle

2017-07-12 Aaron Vance

Wie Sie die Temperatur zu bekommen? Über Get/Post-Methode? – flosommerfeld

Sie könnten eine Opazität Prozentsatz von der Temperatur im Vergleich zu seinem Änderungsbereich berechnen ...

ich eine automatisierte Demo gemacht habe (mit einem Intervall) das Klicken auf den input zu ersparen ...

$("#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);

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

<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>

Quelle

2017-07-12 22:11:56

Ich habe nur ein einfaches Beispiel, das Sie starten könnte helfen. Im Beispiel können Sie die aktuelle Temperatur über 2 Tasten ändern. Die Farben werden mit der animate() -Methode geändert, die das backgroundColor-Attribut ändert. Click here für eine 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();

Quelle

2017-07-12 22:04:16 flosommerfeld

Verwenden HSL statt RGB Ihre Farben darzustellen.

Ändern der hue Komponente können Sie von einer Farbe zu einer anderen verblassen (wenn Sie diese blau-grün-rot schame haben möchten).

Ansonsten können Sie die lightness Komponente verwenden, von einer Farbe zu weiß verblassen und dann von weiß zu einer anderen Farbe, etwa so:

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"/>

Hinweis Sie das Gleiche erreichen können Verwenden Sie RGB, indem Sie einfach die rote oder blaue Komponente fixieren und die anderen beiden erhöhen, um die Farbe auf weiß zu reduzieren. Im Allgemeinen finde ich es jedoch einfacher, Farben zu verblassen/zu mischen, indem man HSL verwendet.

Quelle

2017-07-12 22:08:14 Danziger

Fade Hintergrundfarbe je nach Wert JavaScript

Antwort

Verwandte Themen