根据温度范围更改背景颜色

我从Weather Underground获取一些API信息，并想知道是否可以通过使用API提供的信息通过jQuery更改整个body的背景颜色。根据温度范围更改背景颜色

我想要做的是在body标记上根据通过API返回的一定范围的温度设置一个类。因此，例如：

"current_observation": { 
    "image": { 
    "url":"http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png", 
    "title":"Weather Underground", 
    "link":"http://www.wunderground.com" 
    }, 
    "display_location": { 
    "full":"Bowling Green, KY", 
    "city":"Bowling Green", 
    "state":"KY", 
    "state_name":"Kentucky", 
    "country":"US", 
    "country_iso3166":"US", 
    "zip":"42101", 
    "latitude":"37.02899933", 
    "longitude":"-86.46366119", 
    "elevation":"154.00000000" 
    }, 
    "observation_location": { 
    "full":"Ridgeview Drive, Bowling Green, Kentucky", 
    "city":"Ridgeview Drive, Bowling Green", 
    "state":"Kentucky", 
    "country":"US", 
    "country_iso3166":"US", 
    "latitude":"36.993744", 
    "longitude":"-86.522827", 
    "elevation":"714 ft" 
    }, 
    "estimated": { 
    }, 
    "station_id":"KKYBOWLI7", 
    "observation_time":"Last Updated on May 24, 2:25 PM CDT", 
    "observation_time_rfc822":"Thu, 24 May 2012 14:25:18 -0500", 
    "observation_epoch":"1337887518", 
    "local_time_rfc822":"Thu, 24 May 2012 14:25:29 -0500", 
    "local_epoch":"1337887529", 
    "local_tz_short":"CDT", 
    "local_tz_long":"America/Chicago", 
    "local_tz_offset":"-0500", 
    "weather":"Clear", 
    "temperature_string":"86.8 F (30.4 C)", 
    "temp_f":86.8

也就是说一些信息，我在拉最后一个temp_f是我想集中精力做。

范围的一个例子是 - 80至90应显示background:#dd7f35

我已经尝试建立了这个自定义变量，但总是拉闸摔东西。我似乎无法弄清楚如何使用从JSON拉入的信息来建立一个变量（如果这甚至有可能因为temp_f使用小数。）

这里是我打电话的JSON

$().ready(function(){ 
    $.getJSON("http://api.wunderground.com/api/[MY API KEY]/conditions/q/autoip.json?callback=?", 
    function(data){ 
     $.each(data, function(i, json) { 
     content = '<h1>' + json.icon + '</h1>'; 
     content += '<img src=' + json.icon_url +'>'; 
     content += '<p>' + json.temp_f + '<p>'; 
     $(content).appendTo("#area"); 
     }); 
    console.log(data) 
    }); 
});

这里是我已经试过

var backDrop = ' + json.temp_f + '

我以前+ json.temp_f +，因为在临时拉就好了普通的HTML，但我可以种假设这是不会在这种情况下工作？

任何帮助，非常感谢。

来源

2012-05-24 Clay_Cauley

var backDrop = json.temp_f;

只是摆脱引号和增加。

或者你可以做这样的事情：

var colorOutput = ''; 

if(json.temp_f < 20){ 
    colorOutput = 'blue'; //use hex color 
}else if(json.temp_f >=20 && json.temp_f < 60){ 
    colorOutput = 'orange'; //use hex color 
} 

$('#colorMeElement').css('background',colorOutput);

来源

2012-05-24 21:03:19 Fresheyeball

太棒了，谢谢，我会给这个镜头。 –

设置CSS样式每个范围，颜色组合，像.range_80_90有背景：＃dd7f35。然后，您可以在脚本中动态创建类并将其应用于相应的元素。

来源

2012-05-24 21:05:09

这个，然后就像这样''（body）.addClass（'。range_80_90'）;' – xbonez

就可以将这个类加入到body中，好吧，感谢@IsNull是有意义的，并且比我一直在尝试的方法要容易得多。谢谢吨。 –

@xbonez，谢谢你。 –

根据温度范围更改背景颜色

回答

相关问题