<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<img src="https://www.juhe.cn/themes/v5/public/images/loginlogo.png"><h2>天气应用</h2><hr/>

    <p id="weather">

      今天天气

    </p>    

    <p id="humidity">

    湿度:

  </p>

    <p id="dressing_index">穿衣指数：</p><p id="wash_index">洗车指数：</p><p id="travel_index">旅行指数：</p><p id="exercise_index">锻炼指数：</p><p id="uv_index">紫外线指数：</p><hr/>

  <p>未来6天天气</p>

    <p id="searchResult"></p>

<br/>

   <button>

     查询

</button>

$("button").click(function(){

  $.ajax({  

        url:"https://v.juhe.cn/weather/index?format=2&cityname=%E5%B8%B8%E5%B7%9E&key=17e3e4d1b388f6ee8c0e158e5e16265e",  

        dataType:'jsonp',  

        data:'',  

        jsonp:'callback',  

        success:function(result) {  

          var data = result.result;

             $("p#weather").text("今日天气:"+data.today.weather);

           $("p#humidity").text("湿度:"+data.sk.humidity);

          $("p#dressing_index").text("穿衣指数："+data.today.dressing_index);

          $("p#wash_index").text("洗车指数："+data.today.wash_index);

          $("p#travel_index").text("旅行指数："+data.today.travel_index);

          $("p#exercise_index").text("锻炼指数："+data.today.exercise_index);

          $("p#uv_index").text("紫外线指数："+data.today.uv_index);          

          for (var i=0;i<6;i++){

            var div = $("<span></span>").html(data.future[i].week+":<br/>"+data.future[i].weather);

            $("p#searchResult").after(div);

          }

        }                                                                                    

    });  

})

*{

  text-align:center;

}

h2{

  display:inline;

}

img{

  vertical-align:text-bottom;

}

hr {

  width:80%;

  opacity:0.3;

}

h2{

  color:#FFA500;

}

p{

  font-size:1.2em;

}

span{ 

  background-color:#F5F5F5;

  display:inline-block;

  margin:2px;

  border:1px solid #96B97D;

  border-radius:5px;

  padding:8px;

}