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

目录

• 基于JS+HTML实现的纯前端天气预报实时查询系统
• • 功能介绍
  • 技术栈
  • 运行环境
  • 效果演示
  • 项目结构
  • 示例代码
  • 最后

略阳网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。成都创新互联公司成立与2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
基于JS+HTML实现的纯前端天气预报实时查询系统

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

功能介绍

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

技术栈

JS+HTML+CSS

运行环境

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

效果演示

1. 默认
   
2. 手动查询
   

项目结构

示例代码

页面代码

天气预报
当前城市：重庆
我关注的城市
重庆   
搜索
中央气象台发布
下午好鸭
重庆
   

            
            
            
            
            

数据渲染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("请求失败");
                }
            }
        }

最后

看到最后，欢迎交流

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

本文名称：基于JS+HTML实现的纯前端天气预报实时查询系统-创新互联
网页网址：http://cdkjz.cn/article/decdhi.html