基于JS+HTML实现的纯前端天气预报实时查询系统
默认城市天气预手动输入城市名称查询城市当前天气预报信息
·
基于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("请求失败");
}
}
}
最后
看到最后，欢迎交流
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)