Question

您如何将我的天气应用程序设置为根据不同的温度自动更改背景图像？我将该流程的代码集成到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>

....这是我的CSS代码：

.container{
  text-align: center;
  background: url("https://s1.postimg.org/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg") no-repeat fixed;
  background-size: cover;
  background-position: center;
  /*background-color: blue;*/
  width: 100%;
  height: 1000px;
  margin: auto;  
}

.About{
  /*background-color: blue;*/
  /*transform: translateY(650%)*/ 
  position: fixed;
    top:35%;
    left: 0;
    right: 0;
    margin: auto;
}

h2{
  color: white;
  font-size: 1.5em
}

.holder{
  border: 3px;
  background-color: rgba(0, 0, 0, .80);
  width: 55%;
  height: auto;
  position: fixed;
    top:50%;
    left: 0;
    right: 0;
    margin: auto;
  padding-top:  5px;
  padding-bottom: 10px;
  padding-left: 3px;
  padding-right: 3px;
  border: 3px solid grey;
  border-radius: 10px;  
   display: grid;
   grid-template-columns: 1fr;  
   grid-row-gap: 1em;

}

#city, #weatherType,  #fTemp, #windSpeed{
  transform: translateY(9%);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:5px;
  height: 30px;
  width: 90%;
  margin: auto;
  /*padding-bottom: 2px ;*/
}

.btn.btn-default{
  color: #0040ff;
  font-size: .80em;
  font-family: Orbitron, sans-serif;
  line-height: 2.45em;  
}



@media(min-width: 500px){
  .holder{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  }
}

@media(min-width: 500px{

}

哦，这是我的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)")

  };


  });

});

我需要添加或更改代码吗？感谢您的帮助！

Answer 1

一旦我解决了我在评论中提到的两个问题，我又找到了一个。您的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;

        });
});

请注意第二个done调用结束时的getJSON函数，这可确保在第二个请求完成后调用更改后台的代码。

Working fiddle here.

您还应该查看if / else逻辑。如果温度超过100，你将获得yamaha图片，否则，如果它低于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)")
}

顺便说一句，好看的照片！

我如何获取我的天气应用程序来更改不同温度的图像？

1 个答案: