2016-01-21 41 views
-1

首先,我是初学者。我正试图找到解决我的问题。基本上我希望我的文本是基于数字的不同颜色,所以我使用了ELSE IF语句。它的工作原理,但它不,我尝试了2种不同的方式。我用一个API来显示数字(温度来自传感器)Javascript/JQuery/AJAX否则如果不工作

查看JFiddle的例子,它还显示了其余的代码显示数字。

http://jsfiddle.net/1brkww9h/98/

if (templr < 60) { 
$("#displaylr").css("color", "#0000ff"); 
} 
    else if (templr < 70 && templr > 69) { 
$("#displaylr").css("color", "#FFED00"); 
} else if (templr < 69 && templr > 68) { 
    $("#displaylr").css("color", "#FFFC00"); 
} else if (templr < 68 && templr > 67) { 
    $("#displaylr").css("color", "#EBEE12"); 
} else if (templr < 67 && templr > 66) { 
    $("#displaylr").css("color", "#CFD42C"); 
} else if (templr < 66 && templr > 65) { 
    $("#displaylr").css("color", "#ABB24A"); 
} else if (templr < 65 && templr > 64) { 
    $("#displaylr").css("color", "#858C6C"); 
} else if (templr < 64 && templr > 63) { 
    $("#displaylr").css("color", "#3D41AF"); 
} else if (templr < 63 && templr > 62) { 
    $("#displaylr").css("color", "#0000FD"); 
} else if (templr < 62 && templr > 61) { 
    $("#displaylr").css("color", "#424DFF"); 
} else { 
    $("#displaylr").css("color", "#dddddd"); 

} 

http://jsfiddle.net/1brkww9h/99/

if (templr < 1) { 
    $("#displaylr").css("color", "#000000"); 
} 
else if (templr = 69) { 
    $("#displaylr").css("color", "#FFED00"); 
} 
else if (templr = 68) { 
    $("#displaylr").css("color", "#FFFC00"); 
} 
else if (templr = 67) { 
    $("#displaylr").css("color", "#EBEE12"); 
} 
else if (templr = 66) { 
    $("#displaylr").css("color", "#CFD42C"); 
} 
else if (templr = 65) { 
    $("#displaylr").css("color", "#ABB24A"); 
} 
else if (templr = 64) { 
    $("#displaylr").css("color", "#858C6C"); 
} 
else if (templr = 63) { 
    $("#displaylr").css("color", "#3D41AF"); 
} 
else if (templr = 62) { 
    $("#displaylr").css("color", "#0000FD"); 
} 
else if (templr = 61) { 
    $("#displaylr").css("color", "#424DFF"); 
} 
else { 
    $("#displaylr").css("color", "#dddddd"); 

} 
+2

你写替换所有if声明“这作品,但它不“。对不起,你想要出现什么?出现什么你不想出现? – Kirby

+0

请使用[Switch](http://www.w3schools.com/js/js_switch.asp)声明。 –

+0

@Kirby这是改变颜色,但它不会根据数字来改变它... – Jaker

回答

3

templr变量是一个jQuery对象,而不是数量。

jObject.text(var)将返回jObjectjObject.text()将返回jObject内的文本。

您需要将代码

var templr = $("#displaylr").text(((retval.d.temp_degC * 1.8) + 32).toFixed(1)); 

改变

var templr = (retval.d.temp_degC * 1.8) + 32; 
$("#displaylr").text(templr.toFixed(1)); 

而且你的条件if陈述新的比赛整数,只有在两者之间。

数字6564将得到#dddddd,但数字64.1到64.9将得到#858C6C

如果你只是想60与70之间的蓝黄色渐变,您可以使用此功能

function get_color(num, min_val, min_color, max_val, max_color) 
{ 
    if (num <= min_val) 
     return "rgb("+min_color.join(",")+")"; 
    if (num >= max_val) 
     return "rgb("+max_color.join(",")+")"; 
    var t = (num-min_val)/(max_val-min_val); 
    var color = [0,0,0]; 
    for (var j=0; j<3; j++) 
     color[j] = Math.floor(min_color[j]*(1-t) + max_color[j]*t); 
    return "rgb("+color.join(",")+")"; 
} 

,然后你可以用

$("#displaylr").css("color", get_color(templr, 60, [0x00,0x00,0xFF], 70, [0xFF,0xFF,0x00])); 
+0

真棒!我调整了一些东西,但这正是我需要的。 @gre_gor – Jaker

+0

如果我想要这样的渐变怎么办? http://jakerieskamp.com/mobile/colormap.html @gre_gor – Jaker

+0

@Jaker https://jsfiddle.net/qrxspods/ –

相关问题