js查询天气预报(基于第三方接口)

Ajax框架/RIA

下载此实例

开发语言：js
实例大小：0.14M
下载次数：14
浏览次数：357
发布时间：2021-11-04
实例类别：Ajax框架/RIA
发布人：渡沧海
文件格式：.zip
所需积分：2

实例介绍

[下载地址]

【实例简介】

看天气_js

【实例截图】

【核心代码】

!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
       <script src="js/jquery.min.js"></script>
       <title>看天气</title>
   </head>
   <body class="container">
       <div class="jumbotron text-center">
           <h2 class="display-4">看天气</h2>
           <p>城市和地区实时天气查询</p>
       </div>
        <div class="input-group mb-3">
            <input type="text" class="form-control text-center" placeholder="请输入城市名称···" id="city">
            <div class="input-group-append">
                <input type="button" value="查询" class="btn btn-primary" id="search">
            </div>
        </div>
        <div class="card border-success">
            <div class="card-header bg-success text-white text-center" id="show">南昌天气数据</div>
            <div class="card-body pl-5">
                <div id="cond_txt"></div>
               <div id="tmp"></div>
               <div id="wind_dir"></div>
               <div id="wind_sc"></div>
            </div>
            <div class="card-footer bg-success text-white text-center">数据源：和风天气API</div>
        </div>
       <script type="text/javascript">
           weather("南昌");
           function weather(city) {
               $.ajax({
                   type: "get",
                   url: "https://free-api.heweather.com/s6/weather/now",
                   dataType: "json",
                   data: {
                       location: city, // 城市
                       //key:"eb33dbe3cb9942619130dd85e05056d6"
                       key:"3a73be4fe3e84640b11ec96b2a2a1a41"
                   },
                   success: function(data) {
                        var info = data.HeWeather6[0].now;
                        //console.log(info);
                       document.getElementById("cond_txt").innerHTML = "天气：" info.cond_txt;
                       document.getElementById("tmp").innerHTML = "温度：" info.tmp;
                       document.getElementById("wind_dir").innerHTML = "风向：" info.wind_dir;
                       document.getElementById("wind_sc").innerHTML = "风力：" info.wind_sc "级";
                        document.getElementById("show").innerHTML = city "天气数据";
                   }
               });
           }
           $(search).click(function(){
               if($(city).val() == ""){
                   weather("南昌");
               }else{
                   weather($(city).val());
               }
           })
       </script>
   </body>
</html>

标签： js 天气 HTML vue

实例下载地址