Javascript 我如何让我的天气应用程序改变不同温度下的图像？_Javascript_Css

Javascript 我如何让我的天气应用程序改变不同温度下的图像？

javascript css

Javascript 我如何让我的天气应用程序改变不同温度下的图像？,javascript,css,Javascript,Css,您好，我如何让我的天气应用程序根据不同的温度自动更改背景图像？我已将该过程的代码集成到web应用程序中，但它不起作用这是我的HTML： <html> <title></title> <head><link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'></head> <bod

您好，我如何让我的天气应用程序根据不同的温度自动更改背景图像？我已将该过程的代码集成到web应用程序中，但它不起作用

这是我的HTML：

<html>
  <title></title>
  <head><link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'></head>
  <body> 
    <div class="container">
      <div class="About">
      <h2>Your Local Weather App</h2>
      </div>
      <div class="holder">
        <div class = "btn btn-default" id="city">
        </div>
        <div class = "btn btn-default"  id="weatherType">
        </div>
        <div class = "btn btn-default"  id="fTemp">
        </div>
        <div class = "btn btn-default"  id="windSpeed">
        </div>
      </div>
    </div>  
</body>

哦，这是我的JavaScript代码

$(document).ready(function(){
 var lat;
  var long;
  $.getJSON("https://freegeoip.net/json/",function(data2){
    lat=data2.latitude;
    long=data2.longitude;
    console.log(lat);
    console.log(long);
 //creating an api with the user's geolocation 
  var api = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b6e4d569d1718b07a44702443dd0ed77"


  //json call for the api
  $.getJSON(api, function(data) {
      var fTemp;
  var cTemp;
  var tempSwap = true;

   var weatherType = data.weather[0].description;
    var kTemp = data.main.temp;
    var windSpeed = data.wind.speed;
    var city = data.name;
    $("#city").html(city);
    fTemp = (kTemp*(9/5)-459.67).toFixed(2);
    cTemp = (kTemp-273).toFixed(1);

    $("#api").html(api);
    $("#weatherType").html(weatherType);

    $("#fTemp").html(fTemp + "&#8457;");
    $("#fTemp").click(function(){
      if (tempSwap===false) {
        $("#fTemp").html(fTemp + "&#8457;");
        tempSwap=true;
      }
      else {
        $("#fTemp").html(cTemp + "&#8451;");
        tempSwap=false;
      }
    });


    $("#windSpeed").html(windSpeed + "m/sec");
 })

    if(fTemp>=100){
      $("container").css("background-image","url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
    }
      else if(fTemp<90){
        $("container").css("background-image", "url(https://s2.postimg.org/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
      }
      else if (fTemp>80){
       $("container").css("background-image", "url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
      }
      else if (fTemp<70){
       $("container").css("background-image", "url(https://s2.postimg.org/t4pzebr0p/golf_course_landscape-wallpaper-1024x768.jpg)") 
      }
      else if (fTemp<60){
       $("container").css("background-image", "url()")  
      }
       else if (fTemp<50){
       $("container").css("background-image", "url(https://s2.postimg.org/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg)")
      }
       else if (fTemp=37.40){
       $("container").css("background-image", url("https://s2.postimg.org/8xcjlpoax/rihanna_9-wallpaper-1024x768.jpg")) 
      }
       else if (fTemp<30){
       $("container").css("background-image", "url(https://s2.postimg.org/nhtmgb6c9/white_snowy_road-wallpaper-1024x768.jpg)")
      }
       else if (fTemp<20){
       $("container").css("background-image", "url(https://s2.postimg.org/9a3xrntnd/rihanna_dior_sunglasses-wallpaper-1024x768.jpg)") 
      }
       else if (fTemp<10){
       $("container").css("background-image", "url()")
      }
       else if (fTemp<0){
       $("container").css("background-image", "url(https://s2.postimg.org/r05mdaf49/snowy_cabin_mountains_winter-wallpaper-1024x768.jpg)")
      }
       else if (fTemp<-10){
       $("container").css("background-image", "url(https://s2.postimg.org/7v2d3i5l5/skiing-wallpaper-1024x768.jpg)")

  };


  });

});

$（文档）.ready（函数（）{
var lat；
var long；
$.getJSON（“https://freegeoip.net/json/，函数（数据2）{
纬度=数据2.5度；
long=data2.0；
控制台日志（lat）；
控制台日志（长）；
//使用用户的地理位置创建api
变量api=”https://api.openweathermap.org/data/2.5/weather?lat=“+lat+”&lon=“+long+”&appid=b6e4d569d1718b07a44702443dd0ed77”
//api的json调用
$.getJSON（api，函数（数据）{
var-fTemp；
var-cTemp；
var-tempSwap=true；
var weatherType=data.weather[0]。说明；
var kTemp=data.main.temp；
var风速=数据风速；
var city=data.name；
$（“#城市”）.html（城市）；
fTemp=（kTemp*（9/5）-459.67.toFixed（2）；
cTemp=（kTemp-273）.toFixed（1）；
$（“#api”）.html（api）；
$（“#weatherType”）.html（weatherType）；
$（“#fTemp”）.html（fTemp+”℉；”；
$（“#fTemp”）。单击（函数（）{
if（tempSwap==false）{
$（“#fTemp”）.html（fTemp+”℉；”；
tempSwap=true；
}
否则{
$（“#fTemp”）.html（cTemp+”℃；”；
tempSwap=false；
}
});
$（“#风速”）.html（风速+“米/秒”）；
})
如果（fTemp>=100）{
$（“容器”）.css（“背景图像”，“url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
}
否则如果（fTemp80）{
$（“容器”）.css（“背景图像”，“url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
}
else if（fTemp一旦我解决了我在评论中提到的两个问题，我又发现了一个问题。您的getJSON
调用的顺序不正确。由于第二个getJSON
调用依赖于第一个调用，因此您需要类似以下内容：
$.getJSON("https://freegeoip.net/json/",function(data2){
console.log("1");
console.log(data2);
    var lat = data2.latitude;
    var long = data2.longitude;
    var api = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b6e4d569d1718b07a44702443dd0ed77";
        $.getJSON(api).done(function(data, dataOther){

             var fTemp;
             var cTemp;
             var tempSwap = true;

        });
});

请注意第二次getJSON
调用末尾的done
函数，它确保在第二次请求完成后调用更改背景的代码

您还应该查看if/else逻辑。如果温度超过100，您将获得雅马哈图片，否则如果温度低于90，您将获得碧昂斯图片。您需要设置逻辑，使每张图片都在一个范围内。例如，请参阅下面的片段：
 if (fTemp >= 100) {
    $(".container").css("background-image", "url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
} else if (fTemp > 90) {
    $(".container").css("background-image", "url(https://s2.postimg.org/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
} else if (fTemp > 80) {
    $(".container").css("background-image", "url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
}

顺便说一句，很好的图片！
一旦我解决了我在评论中提到的两个问题，我又发现了一个问题。您的getJSON
调用的顺序不正确。因为第二个getJSON
调用依赖于第一个，所以您需要这样的东西：
$.getJSON("https://freegeoip.net/json/",function(data2){
console.log("1");
console.log(data2);
    var lat = data2.latitude;
    var long = data2.longitude;
    var api = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b6e4d569d1718b07a44702443dd0ed77";
        $.getJSON(api).done(function(data, dataOther){

             var fTemp;
             var cTemp;
             var tempSwap = true;

        });
});

请注意第二次getJSON
调用末尾的done
函数，它确保在第二次请求完成后调用更改背景的代码

您还应该查看if/else逻辑。如果温度超过100，您将获得雅马哈图片，否则如果温度低于90，您将获得碧昂斯图片。您需要设置逻辑，使每张图片都在一个范围内。例如，请参阅下面的片段：
 if (fTemp >= 100) {
    $(".container").css("background-image", "url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
} else if (fTemp > 90) {
    $(".container").css("background-image", "url(https://s2.postimg.org/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
} else if (fTemp > 80) {
    $(".container").css("background-image", "url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
}

顺便说一句，很好的图片！
你是在用api加载数据吗？代码在哪里？我只是看到了标记和样式表。@I.R.R.哦，对不起，我刚刚添加了JavaScript代码！@KristinaDarroch，是的，我在用APIT它看起来不错，奇怪的是它不起作用。如果你在样式表中为不同的温度和温度设置不同的css类呢d而不仅仅是使用jquery removeClass/addClass？这样行吗？你是使用api加载数据吗？代码在哪里？我只是看到了标记和样式表。@I.R.R.哦，对不起，我刚刚添加了JavaScript代码！@KristinaDarroch，是的，我使用的是APIT它看起来不错，但不起作用。如果你在样式表中设置不同的css类呢或者不同的温度，而不仅仅是使用jquery removeClass/addClass？这行吗？谢谢…我知道正确的图片是呜呜呜呜！哈哈哈…你怎么看它们的？哈哈！看看小提琴。我测试了一些数据。顺便说一下，你的if/else条件需要做一些工作。嘿，@Jonathan Chaplin，谢谢你把所有的工作都放进去了创建一个JSFIDLE来帮助我！我非常感谢！你想去聊天室吗？我甚至不知道聊天室在哪里，哈哈……但我在你的小提琴中看到的第一件事……是现在显示的图片，即碧昂斯，假设只有当温度高于80时才会显示！就像我在你的if上面所说的/else块是问题所在。我将更新我的答案以反映这一点。嗨，我昨天修复了它。我想出了一个更好的if/else语句，使用了不同的操作数。谢谢你的帮助！谢谢…我知道正确的图片是Woooooooo！哈哈哈…你怎么看它们的！？哈哈！看看小提琴。我测试了一些数据。顺便说一下，你的if/else条件nals需要一点工作。嘿，@Jonathan Chaplin，谢谢你把所有的工作都投入进来，并创建了一个JSFIDLE来帮助我！我非常感谢！你想去聊天室吗？我甚至不知道聊天室在哪里lol……但我在你的小提琴中看到的第一件事……是现在显示的照片，那就是碧昂丝，假设仅当温度高于80时才显示！正如我在上面所说，您的if/else块是问题所在。我将更新我的答案以反映这一点。您好，我昨天修复了它。我使用不同的操作数提出了一个更好的if/else语句。谢谢您的帮助！