Question

我正在为自己创建一个Raspberry pi MagicMirror的项目（在github上找到，感谢所有帮助它成为可能/可用的人！）并且我正在为自己的调整工作。如果您不熟悉，它会使用Javascript和CSS。

我一直在定制一个从Dark Skies API（https://darksky.net/dev/）中提取的温度模块，并希望弄清楚如何在最小温度和最高温度之间获得一个CSS条，以便在渐变之间着色两个温度。例如：

mintemp（蓝色）[。。。。。。。。。。。。 ] maxtemp（橙色）

为了争论起见，我想让中间栏去，＃00FFD7到＃E05700。我需要为此编码什么？想要通用公式来计算变量的颜色。这是我的相关代码：

var minTemp = document.createElement("span");
minTemp.innerHTML = rowMinTemp + "&deg;";           
        if(rowMinTemp <=0) {
            minTemp.className = "customComment max-tempU0";
        }
        else if (rowMinTemp <=20) {
            minTemp.className = "customComment max-temp20";
        }
        else if (rowMinTemp <=30) {
            minTemp.className = "customComment max-temp30";
        }
        else if (rowMinTemp <=40) {
            minTemp.className = "customComment max-temp40";
        }
        else if (rowMinTemp <=50) {
            minTemp.className = "customComment max-temp50";
        }
        else if (rowMinTemp <=60) {
            minTemp.className = "customComment max-temp60";
        }
        else if (rowMinTemp <=70) {
            minTemp.className = "customComment max-temp70";
        }
        else if (rowMinTemp <=80) {
            minTemp.className = "customComment max-temp80";
        }   
        else {
            minTemp.className = "customComment max-temp90";
        }

var maxTemp = document.createElement("span");
maxTemp.innerHTML = rowMaxTemp + "&deg;";
//maxTemp.className = "temp max-temp";
        if (rowMaxTemp <= 0) {
            maxTemp.className = "customComment max-tempU0";             
        }
        else if (rowMaxTemp <= 20) {
            maxTemp.className= "customComment max-temp20";
        }   
        else if (rowMaxTemp <= 30) {
            maxTemp.className= "customComment max-temp30";
        }
        else if (rowMaxTemp <= 40) {
            maxTemp.className= "customComment max-temp40";
        }
        else if (rowMaxTemp <= 50) {
            maxTemp.className= "customComment max-temp50";
        }
        else if (rowMaxTemp <= 60) {
            maxTemp.className= "customComment max-temp60";
        }
        else if (rowMaxTemp <= 70) {
            maxTemp.className= "customComment max-temp70";
        }
        else if (rowMaxTemp <= 80) {
            maxTemp.className= "customComment max-temp80";
        }
        else {
            maxTemp.className= "customComment max-temp90";
        }

var bar = document.createElement("span");
bar.className = "bar";
bar.innerHTML = "&nbsp;"
var barWidth = Math.round(interval * (rowMaxTemp - rowMinTemp));
bar.style.width = barWidth + '%';

如果我遗漏了所需的东西，请告诉我。谢谢！

使用CSS计算两个十六进制颜色之间的渐变

0 个答案: