HTML+jQuery+Vue实现天气查询网页_html 统计表显示风向

作者：知新_RL | 2024-07-31 02:25:42

踩

html 统计表显示风向

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

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';
        }
      });
    },

  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/906564