基于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>

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

最后

看到最后，欢迎交流

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

基于Java+Jsp实现的指定城市天气实时查询系统
目录基于Java+Jsp实现的城市天气实时查询Web系统功能介绍技术栈运行环境效果演示项目结构示例代码最后基于Java+Jsp实现的城市天气实时查询Web系统简单易懂的web天气查 ...
java毕业设计基于JS的租房网站mybatis+源码+调试部署+系统+数据库+lw
java毕业设计基于JS的租房网站mybatis+源码+调试部署+系统+数据库+lw java毕业设计基于JS的租房网站mybatis+源码+调试部署+系统+数据库+lw 本源码技术栈: 项目架构:B ...
纯前端实现模糊查询或和且
js代码: //onclick事件 function searchText() {var keyword = $("#search_text").val().trim();var ...
商品出库入库项目html,纯前端微型出入库管理系统(个人使用型)
不依赖后端圈是的编小久据直请结未屏屏会气机页实应高和数据库的库存管理系统简单实现,有点像闹着玩的意思,自己用用还能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果行注意 in ...
基于python-django的neo4j人民的名义关系图谱查询系统
简介这个系统主要是基于neo4j的关系图谱联系使用里面的关系是在网上找的数据文件,主要是人民的名义对应关系首先是吧数据对应的节点和关系写入的neo4j里面然后使用django编写了一个web服 ...
基于JAVA+SpringMVC+Mybatis+MYSQL的快递预取件查询系统
项目功能: 本系统分用户前台和管理员后台. 用户前台主要功能有: 首页物流业务团队时效费用查询我的快递寄快递个人中心管理员后台的功能有: 用户列表管理快递员管理省份,城市,区县列表管 ...
毕业设计-基于微信小程序与云开发的成绩查询系统
目录前言课题背景与简介实现设计思路一.开发微信小程序的相关技术云开发二.微信小程序的实现三.总结实现效果样例更多帮助前言
基于JAVA星星电影购票网站计算机毕业设计源码+系统+数据库+lw文档+部署
基于JAVA星星电影购票网站计算机毕业设计源码+系统+数据库+lw文档+部署基于JAVA星星电影购票网站计算机毕业设计源码+系统+数据库+lw文档+部署本源码技术栈: 项目架构:B/S架构开发语 ...
基于EasyDL搭建音频在线实时分类系统
文章目录搭建音频在线实时分类系统 1. easydl 训练音频分类模型 1.1 上传数据并训练音频分类模型 1.2 发布训练好的模型 2. 前端部署搭建音频在线实时分类系统本人基于自我学习目的搭 ...

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

目录

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

功能介绍

技术栈

运行环境

效果演示

项目结构

示例代码

最后

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

最新文章

热门文章