SOURCE

$(document).ready(function() {
  $.getJSON('https://ipinfo.io', function(location) {
    var locArr = location.loc.split(',');
    //console.log("ip"+locArr);
    var lat = locArr[0]; //精度
    var lon = locArr[1]; //纬度
    var api = "https://fcc-weather-api.glitch.me/api/current?" + "lat=" + lat + "&lon=" + lon;
    $.getJSON(api, function(data) {
      $('#loc').text(location.city);
      var tempValue = $('#temp');
      tempValue.text(data.main.temp);
      var tempUnit = $('#tempUnit');
      tempUnit.bind('click', function() {
        if (tempUnit.text() === 'C') {
          tempUnit.text('F');
          var ctemp = tempValue.text();
          var ftemp = (parseInt(ctemp) * 9 / 5 + 32).toFixed(2);
          tempValue.text(ftemp);
        } else {
          tempUnit.text('C');
          var ftemp = tempValue.text();
          var ctemp = ((parseInt(ftemp) - 32) * 5 / 9).toFixed(2);
          tempValue.text(ctemp);
        }
      });

      $('#wind').text(data.wind.speed);
      $('#windDir').text(getWindDir(data.wind.deg));
      //console.log('dd'+data.wind.deg);
      $('#desc').text(data.weather[0].description);
      $('#humidity').text(data.main.humidity);
      $weather = data.weather[0].main;
      $icon = $('#icon');
      $body = $('body');
      switch ($weather) {
      case 'Clear':
        $icon.addClass('wi-day-sunny');
        $body.css('background', 'url(https://images.pexels.com/photos/288121/pexels-photo-28121.jpg)');
        break;
      case 'Thunderstorm':
        $icon.addClass('wi-thunderstorm');
        $body.css('background', 'url(https://images.pexels.com/photos/29550/pexels-photo-29550.jpg)');
        break;
      case 'Clouds':
        $icon.addClass('wi-day-cloudy');
        $body.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/8/83/Sky_cloudy.JPG)');
        break;

      case 'Mist':
        $icon.addClass('wi-sprinkle');
        $body.css('background', 'url(https://images.pexels.com/photos/603/sky-clouds-sun.jpg)');
        break;

      case 'Extreme':
        $icon.addClass('wi-cloudy');
        $body.css('background', 'url(https://images.pexels.com/photos/325288/pexels-photo-325288.jpeg)');
        break;

      case 'Atmosphere':
        $icon.addClass('wi-windy');
        $body.css('background', 'url(https://images.pexels.com/photos/314726/pexels-photo-314726.jpeg)');
        break;

      case 'Snow':
        $icon.addClass('wi-snow');
        $body.css('background', 'url(https://images.pexels.com/photos/4022/cold-snow-forest-trees.jpeg)');
        break;

      case 'Rain':
        $icon.addClass('wi-rain');
        $body.css('background', 'url()');
        $body.css('background', 'url(http://www.publicdomainpictures.net/pictures/30000/velka/rain.jpg)');
        break;

      case 'Drizzle':
        $icon.addClass('wi-night-rain');
        $body.css('background', 'url(https://c1.staticflickr.com/7/6028/6009378383_a002798f38_b.jpg)');
        break;

      case 'Additional':
        $icon.addClass('wi-cloud');
        $body.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/d/d9/Wind_Power_at_Guanting_Resevoir.jpg)');
        break;

      default:
        $body.css('background', 'url(https://images.pexels.com/photos/2969/climate-cold-glacier-iceberg.jpg)');
        break;
      }
      $body.css('background-repeat', 'no-repeat');
      $body.css('background-size', '100% 100%');
    });
    function getWindDir(dir) {
      var windDir = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
      var windIndex = Math.floor(dir / 45);
      return windDir[windIndex];
    }
  })
})

<div class="wrapper">
  <div class="info-box">
    <div class="temp-loc">
      <h1>
        <span class="tempWraper">
          <span id="temp">
          </span>
          <span id="tempUnit" class="tempUnit">
            &#176;C
          </span>
        </span>
      </h1>
      <p>
        <span class="locWraper">
          <i class="fa fa-map-marker">
          </i>
          <span id="loc">
          </span>
        </span>
        <span class="desc">
          <i class="wi" id="icon">
          </i>
          <span id="desc">
          </span>
        </span>
      </p>
      <p>
        <span class="wind">
          wind:
          <span id="windDir">
          </span>
          <span id="wind">
          </span>
          m/s
        </span>
      </p>
      <p>
        <span class="humidity">
          Humidity:
          <span id="humidity">
          </span>
        </span>
      </p>
    </div>
  </div>
</div>

.info-box {
  margin: 10px auto 10px auto;
  text-align: center;
}

.tempWraper {
  background: #000;
  width: auto;
  height: auto;
  opacity: .5;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.locWraper {
  background: #fff;
  opacity: .5;
  border-radius: 10px;
  padding: 10px;
  height: 20px;
  color: #000;
  font-family: Verdana;
}

.desc {
  background: #fff;
  opacity: .5;
  height: 20px;
  padding: 10px;
  border-radius: 10px;
  margin-left: 20px;
  font-weight: bold;
}

.wind,
.humidity {
  background: yellow;
  opacity: .4;
  height: 20px;
  border-radius: 10px;
  padding: 5px;
}

.tempUnit {
  color: orange;
  cursor: pointer;
  //margin-left:-30px;
}

#temp {
  font-size: 35px;
  font-weight: bold;
  font-family: Verdana;
}