html 显示当地天气| FreeCodeCamp

Posted 2021-05-10

body {
  background-color: #3547ce;
  color: white;
  margin: 20px auto;
  width: 50%;
  text-align: center;
  font-family: 'Julius Sans One', sans-serif;
}

a {
  text-decoration: none;
  color: #b5beff;
}

a:hover {
  color: #45acbc;
}

span {
  padding-right: 30px;
}

img {
  width: 100px;
  height: 100px;
  position: relative;
  top: 10px;
}

button {
  border: 2px white solid;
  background-color: #3547ce;
  color: white;
  font-family: 'Julius Sans One', sans-serif;
  padding: 10px;
  font-size: 1em;
  position: relative;
  bottom: 50px;
}

button:hover {
  background-color: grey;
  transition: 0.5s;
}

#location {
  font-size: 40px;
}

#temp {
  font-size: 90px;
  position:relative;
  bottom: 50px;
}

#time {
  float: left !important;
  font-size: 25px;
  font-weight: bold;
  position: relative;
  right: 3em;
}

#month {
  float: right !important;
  font-size: 25px;
  font-weight: bold;
  position: relative;
  left: 3em;
}

#weather-type {
  font-size: 30px;
  position:relative;
  bottom: 100px;
}

#wind-hum-pres {
  font-size: 20px;
}
#wind, #hum-dew{
  position:relative;
  bottom: 100px;
}

#attribution {
  position: relative;
  bottom: 30px;
  font-size: 12px;
}

.underground {
  width: 70px;
  height: 50px;
  top: 0px;
}

Show the Local Weather | FreeCodeCamp
-------------------------------------
A Show the Local Weather app made for Free Code Camp using wunderground API.

A [Pen](https://codepen.io/harunpehlivan/pen/qodNVP) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/qodNVP/license).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(document).ready(function(){
  
  var url="https://api.wunderground.com/api/9b7b55b808e558ac/geolookup/conditions/q/autoip.json";
  
 $.ajax({
  url : url,
  dataType : "jsonp",
  success : function(data) {
    var city = data.location.nearby_weather_stations.pws.station[0].city;
    var temp_f = data['current_observation']['temp_f'];
    var tempCel =data.current_observation.temp_c + "℃";
    var tempFah =data.current_observation.temp_f + "℉";
    var province = data.location.nearby_weather_stations.pws.station[0].state;
    var weatherType = data.current_observation.weather;
    var ms = data.current_observation.wind_kph +" m/s";
    var mph = data.current_observation.wind_mph +" MPH";
    var weatherIcon = data.current_observation.icon_url;
    var windDir = data.current_observation.wind_dir;
    var dewPointC ="Dew Point: " + data.current_observation.dewpoint_c + "℃";
    var dewPointF ="Dew Point: " + data.current_observation.dewpoint_f + "℉";
    var humidity = data.current_observation.relative_humidity +" humidity";
    var celFah = false;  
    //console.log(humidity);
    //console.log(ms);
    //console.log(mph);
    //console.log(weatherType);
    //console.log("Current temperature in " + city + ", " + province + " is: " + tempFah + "F");
    //console.log(tempCel);
    //console.log(data);
    
    
     $("#location").html(city+', '+province);
      $("#date").html(Date());
      $("#temp").html(tempCel);
      $("#wind").html(ms + ' ' + windDir);
      
      $("#weather-img").attr("src", weatherIcon);
      
      $("#cel-fah-btn").click(function(){
       if(celFah === false){
         $("#temp").html(tempFah);
         $("#wind").html(mph + ' ' + windDir);
         $("#hum-dew").html(humidity+'   '+dewPointF);
         
         celFah = true;
       }else{
         $("#temp").html(tempCel);
         $("#wind").html(ms + ' ' + windDir);
         $("#hum-dew").html(humidity+'   '+dewPointC);
         celFah = false;
       }
      });
      
      $("#weather-type").html(weatherType);
      $("#hum-dew").html(humidity+'   '+dewPointC);
    
    <!-- ============= DateTime =========================-->
      
      function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

      var h;
function time() {
    var d = new Date();
    var x = document.getElementById("time");
    var h = addZero(d.getHours());
    var m = addZero(d.getMinutes());
    var s = addZero(d.getSeconds());
    x.innerHTML = h + ":" + m + ":" + s;
}
      time();
      
function month(){
  var x = document.getElementById("month");
  var d = new Date();
  var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";
  var n = month[d.getMonth()];
  var day = d.getDate()
  x.innerHTML = n+' '+day;
}
      month()
   
      <!-- ============= DateTime =========================-->
      var celc = Math.round(tempKel -273.15);
    
    
    
  }//SUCCESS
   
   
   
      
      
   
  });//AJAX

         
   
   
});//ready
                  

<div class="container">
  <p id="time"></p>
  <!-- time -->
  <p id="month"></p>
  <p id="location"></p>
  <!-- location -->
  <img id="weather-img" alt="Image depicting the current weather" src="">
  <p id="temp"></p>
  <!-- temp -->
  <p id="weather-type"></p>
  <!-- Weather-type-->


  <span id="wind"></span><span id="hum-dew"></span>
  <!-- hum-pres -->
  <br/>

  <button id="cel-fah-btn">Metric/Imperial</button>
  <!-- convert button -->


</div>
<!-- container -->
<div id="attribution">
  <p id="weatherAPI">Weather API: <a href="https://www.wunderground.com/">Weather Underground</p>
  <img class="underground"src="http://icons.wxug.com/graphics/wu2/logo_130x80.png"/></a>

 <p><a target="_blank" href="https://twitter.com/AlxCrmr">Coded by AlxCrmr 2017</a></p>
</div>