基于JS+HTML实现的纯前端天气预报实时查询系统_js实现页面天气预报功能

作者：寸_铁 | 2024-07-31 02:24:38

踩

js实现页面天气预报功能

基于JS+HTML实现的纯前端天气预报实时查询系统

该系统为纯前端项目，通过XMLHttpRequest调用易客云天气API，实现了实时查询某个城市的天气信息功能。

功能介绍

默认城市天气预
手动输入城市名称查询城市当前天气预报信息

技术栈

JS+HTML+CSS

运行环境

浏览器打开即可运行；编辑使用VScode或者其他前端开发工具

效果演示

默认
手动查询

项目结构

在这里插入图片描述

示例代码

页面代码

<body>
    <div class="top">
        <div class="title_logo"></div>
        <p class="title">天气预报</p>
        <p class="current_city">当前城市：重庆</p>
        <p class="attention">我关注的城市</p>
        <select id="form">
            <option id="chongqing">重庆</option>
            
        </select>
        <div class="title_right">
            <input class="input" value="重庆">
            <button id="search">搜索</button>
        </div>
    </div>

    <span class="line"></span>
    <h5>中央气象台发布</h5>
    <p class="greet">下午好鸭</p>
    <div class="weather_logo"></div>
    <span class="city">重庆</span>
    <span id="temp"></span>
    <div id="weather_content">
        <div class="item">
            <span class="week"></span>
            <span class="date"></span>
            <span class="temperature"></span>
            <span class="logo"></span>
            <span class="weather_text"></span>
            <span class="air"></span>

        </div>
</body>
<script src="./js/weather.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

数据渲染JS

 xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    let res = xhr.response;

                    city.innerHTML = res.city;
                    current_city.innerHTML = "当前城市:" + res.city;
                    temp.innerHTML = res.data[0].tem + "℃";
                    //遍历天气显示框的各个部分，修改样式
                    let index = 0;
                    while (index < res.data.length) {

                        item[index].children[0].innerHTML = res.data[index].week;
                        item[index].children[1].innerHTML = res.data[index].date;
                        item[index].children[2].innerHTML = res.data[index].tem2 + "℃" + "~" + res.data[index].tem1 + "℃";
                        item[index].children[4].innerHTML = res.data[index].wea;
                        item[index].children[5].innerHTML = "空气质量:" + res.data[index].air_level;

                        switch (res.data[index].wea) {
                            case "小雨":
                            case "多云转小雨":
                            case "阴转小雨":
                            case "阴转阵雨":
                                item[index].children[3].style.backgroundImage = "url(../asserts/小雨.png)";

                                break;
                            case "中雨":

                            case "小雨转中雨":
                                item[index].children[3].style.backgroundImage = "url(../asserts/中雨.png)";
                                break;
                            case "大雨":
                            case "中雨转大雨":
                            case "小雨转大雨":
                                item[index].children[3].style.backgroundImage = "url(../asserts/大雨.png)";
                                break;
                            case "晴":
                            case "多云转晴":
                            case "阴转晴":
                                item[index].children[3].style.backgroundImage = "url(../asserts/晴.png)";
                                break;
                            case "阴":
                            case "多云转阴":
                            case "晴转阴":
                            case "小雨转阴":
                                item[index].children[3].style.backgroundImage = "url(../asserts/阴.png)";
                                break;
                            default:
                                item[index].children[3].style.backgroundImage = "url(../asserts/多云.png)";
                        }
                        index++;
                    }
                    weather_logo.style.backgroundImage = item[0].children[3].style.backgroundImage;


                } else {
                    console.log("请求失败");
                }
            }
        }
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

最后

看到最后，欢迎交流

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

基于JS+HTML实现的纯前端天气预报实时查询系统_js实现 页面天气预报功能

目录

基于JS+HTML实现的纯前端天气预报实时查询系统

功能介绍

技术栈

运行环境

效果演示

项目结构

示例代码

最后

基于JS+HTML实现的纯前端天气预报实时查询系统_js实现页面天气预报功能