HTML+jQuery+Vue实现天气查询网页

zipen Chen

已于 2022-05-12 22:14:37 修改

阅读量2.5k

点赞数 4

分类专栏： HTML 文章标签： html jquery js vue javascript

于 2021-04-04 23:04:25 首次发布

本文链接：https://blog.csdn.net/qq_28594645/article/details/115435017

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+jQuery+Vue实现天气查询网页

简介

页面使用了和风天气api，每天有5000免费额度。由于本人首先学会的是微信小程序，所以对jQuery的使用会类似于微信小程序。我对代码做了较为详细的注释，所以话不多说，放代码和布局方式
在这里插入图片描述

同一种颜色的框为同一个div下的布局

HTML代码

<html>

<head>
  <title>天气查询</title>
  <!-- 引用jQuery -->
  <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
  <!-- 引用vue -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!-- 链接css样式 -->
  <link rel="stylesheet" href="first.css">
  </link>
</head>

<body id="change">
  <div id="first">
    <button id="button1" v-on:click="change">查询</button>
    <div v-if="flags">
      <!-- 页面上方输入框和按钮 -->
      <div class="box_top">
        <input id="location" placeholder="请输入城市" @keyup.enter="search()">
        <button id="button1" v-on:click="search">查询</button>
      </div>
      <!-- 显示当前查询的城市 -->
      <div class="box1">
        {{'当前城市: '+city}}
      </div>

    </div>
    <div id="box">
      <!-- 中间天气显示部分 -->
      <div id="box_bottom">
        <!-- 中间显示天气图标和温度 -->
        <div id="logo">
          <img id="tupian" src="./color-128/999.png" mode='widthFix'></img>
          <div id="wendu">
            <div id="left">
              {{now_temp}}
            </div>
            <div id="right">
              <div>℃</div>
              <div>{{now_text}}</div>
            </div>
          </div>
        </div>
        <!-- 中间显示当前风向和风速 -->
        <div id="wind">
          <div class="wind_direction">
            <div>当前风向:</div>
            <div>{{now_wind}}</div>
          </div>
          <div class="wind_speed">
            <div>当前风速:</div>
            <div>{{now_windspeed+'KM/S'}}</div>
          </div>
        </div>

      </div>
    </div>
    <!-- 下面三天天气 -->
    <div id="daily">
      <div id="box_bottom1" v-for='day in daily'>
        <div id="time">
          {{day.fxDate}}
        </div>
        <div id="logo">
          <div id="wendu">
            <div id="left">
              {{day.tempMax+'/'}}{{day.tempMin}}
            </div>
            <div id="right">
              <div>℃</div>
              <div>{{day.textDay}}</div>
            </div>
          </div>
        </div>
        <div id="wind">
          <div class="wind_direction">
            <div>当前风向:</div>
            <div>{{day.windDirDay}}</div>
          </div>
          <div class="wind_speed">
            <div>当前风速:</div>
            <div>{{day.windSpeedDay+'KM/S'}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<!-- 链接js -->
<script language="javascript" src="first.js"></script>

</html>

CSS

/* 给整个页面加入背景图片和图片切换动画 */
#change{
    background-image: url('http://img.tukuppt.com/bg_grid/00/31/97/1AItN6lsqr.jpg!/fh/350');
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 1s ease-out;
}
/* 当前查询城市部件的样式 */
.box1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    font-size: x-large;
    color: white;
}
/* 输入框和按钮的布局 */
.box_top{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
/* 输入框的样式 */
#location{
    width: 345px;
    height: 35px;
    border: 2.5px solid cornflowerblue;
    border-radius: 8px;
    outline: none;
    text-indent: 5px;
}
/* 按钮的样式 */
#button1{
    height: 35px;
    width: 50px;
    background-color:cornflowerblue;
    border: 0px;
    border-radius: 8px;
    margin-left: 5px;
    outline: none;
}
/* 中间当前天气的布局 */
#box_bottom{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 400px;
    margin-top: 100px;
    background-color:rgba(0,0,0,.15);
    border-radius: 20px;
    height: 200px;
}
#box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* 图片和当前温度整体的布局 */
#logo{
    display: flex;
    flex-direction: row;
    justify-content: center;

}
/* 温度和天气描述文字的布局 */
#wendu{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
}
/* 只是当前气温数字的样式 */
#left{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;

}
/* 气温数字右方的℃和天气描述文字样式 */
#right{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 5px;
    margin-right: 20px;
    font-size: 30px;
}
/* 关于风向和风速的整体布局 */
#wind{
    display: flex;
    flex-direction: row;
    margin-top: 10PX;
    font-size: 18px;
    width: auto;
    color: white;
}
/* 风向 */
.wind_direction{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
/* 风速 */
.wind_speed{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}
/* 下方三天单天的布局 */
#box_bottom1{
    display: flex;
    flex-direction: column;
    justify-content: center;

}
#daily{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 10px;
    width: 80%;
    left: 10%;
    right: 10%;
    border-radius: 20px;
    justify-content: space-around;
    align-items: center;
    height: 180px;
    background-color:rgba(0,0,0,.15);
}
/* 每天上面的日期样式 */
#time{
    font-size: 18px;
    width: auto;
    margin: 0 auto;
    color: white;
}

JS

var app = new Vue({
  el: '#first',
  data: {
    // 用于存放查询的城市
    city: '',
    // 存放查询城市的id
    location: '',
    // 存放当前温度
    now_temp: 'N/A',
    // 存放天气描述文字，如晴，阴，多云
    now_text: 'N/A',
    // 存放风向
    now_wind: 'N/A',
    // 存放风速
    now_windspeed: 'N/A',
    // 存放三天的天气数据
    daily: '',
    flags: false
  },
  // 所有函数
  methods: {
    change: function () {
      var that = this;
      console.log(that.flags);
      that.flags = true;
    },
    search: function () {
      var that = this;
      // 判断输入框是否输出内容
      if ($('#location')[0].value.length > 0) {
        // 将输入框输入的内容拼接到请求连接中
        url = 'https://geoapi.qweather.com/v2/city/lookup?location=' + $('#location')[0].value + '&key=debbcdc963244961b5721cbf6bf5ddef';
        // 调用api使用ajax发起请求
        $.ajax({
          url: url,
          type: "get",
          async: "true",
          success: function (data) {
            if (data.code == 404) {
              alert("无法查询该城市，请查询县级以上城市");
            }
            else {
              that.city = $('#location')[0].value;
              // 将查询的城市id存到data里面方便下次发起请求时使用
              that.location = data.location[0].id;
              // 调用查询当前天气的函数
              that.getweather();
              // 调用查询三天天气的函数
              that.hour_weather();
            }
          }
        });
      }
      // 如果没有输入城市就弹窗提示
      else (
        alert("请输入城市")
      );
    },
    getweather: function () {
      var that = this;
      // 实现动态天气背景，将各种天气图片放入列表
      var url = {
        晴: 'url("http://img.tukuppt.com/bg_grid/00/31/97/1AItN6lsqr.jpg!/fh/350")',
        阴: 'url("http://img.tukuppt.com/video_pic/08/97/84/5bc4cfe621f54.jpg-0.jpg!/fw/780/quality/90/unsharp/true/compress/true/crop/800x450a80a121")',
        雨: 'url("//img.tukuppt.com/video_pic/08/97/71/5bc4b2092bcaf.jpg-0.jpg!/fw/780/quality/90/unsharp/true/compress/true/crop/800x450a80a121")',
        雪: 'url("http://img.tukuppt.com//ad_preview/00/10/85/5d804bb9aa1c5.jpg!/fw/780")',
        多: 'url("http://img.tukuppt.com/video_pic/08/97/83/5bc6d0cf60551.jpg-0.jpg!/fw/780/quality/90/unsharp/true/compress/true/crop/800x450a80a121")',
        阵: 'url("//img.tukuppt.com/video_pic/08/97/71/5bc4b2092bcaf.jpg-0.jpg!/fw/780/quality/90/unsharp/true/compress/true/crop/800x450a80a121")'
      };
      // 发起请求获取当前天气
      $.ajax({
        url: 'https://devapi.qweather.com/v7/weather/now?location=' + this.location + '&key=debbcdc963244961b5721cbf6bf5ddef',
        type: "get",
        async: "false",
        success: function (data) {
          // 将气温，天气文字描述，风向，风速存入data
          that.now_temp = data.now.temp;
          that.now_text = data.now.text;
          that.now_wind = data.now.windDir;
          that.now_windspeed = data.now.windSpeed;
          // 动态修改中间的天气图标
          $('#tupian')[0].src = './color-128/' + data.now.icon + '.png';
          // 判断返回的天气样式在天气背景图片列表中是否存在，如果不存在，使用多云的背景图片
          if (url[data.now.text[0]] == undefined) {
            $('body').css('background-image', url['多']);
          }
          // 存在的话使用相应的背景图片（只判断返回天气文字描述的第一个字，减少存入背景图片量）
          else {
            $('body').css('background-image', url[data.now.text[0]]);
          }
        }
      });
    },
    // 获取三天天气的函数
    hour_weather: function () {
      var that = this;
      $.ajax({
        url: 'https://devapi.qweather.com/v7/weather/3d?location=' + this.location + '&key=debbcdc963244961b5721cbf6bf5ddef',
        type: "get",
        async: "false",
        success: function (data) {
          // 将返回的列表内的icon对应的图片数字修改为图片所在相对位置，方便html中使用
          that.daily = data.daily;
          that.daily[0].iconDay = "./color-128/" + data.daily[0].iconDay + '.png';
          that.daily[1].iconDay = "./color-128/" + data.daily[1].iconDay + '.png';
          that.daily[2].iconDay = "./color-128/" + data.daily[2].iconDay + '.png';
        }
      });
    },

  }
});

zipen Chen

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
3
评论
HTML+jQuery+Vue实现天气查询网页

HTML+jQuery+Vue实现天气查询网页简介页面使用了和风天气api，每天有5000免费额度。由于本人首先学会的是微信小程序，所以对jQuery的使用会类似于微信小程序。我对代码做了较为详细的注释，所以话不多说，放代码和布局方式同一种颜色的框为同一个div下的布局HTML代码<html> <head> <title>天气查询</title> 
复制链接

扫一扫