<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>
<body>
<div class="container">
<h2>城市天气查询</h2>
<div class="input-group">
<input type="text" id="city" placeholder="请输入城市：(如：上海)" />
<button onclick="queryWeather()">查询</button>
</div>
<div id="result" class="weather-box"></div>
</div>
</body>
<script src="js/test.js" type="text/javascript"></script>
<script>
//1.定义APP_KEY
const APP_KEY = "B570fD5DE0004AC4BCC06F73b7739Fb4"
//2.定义API地址（以文档中的实际地址为准，此处为示例）
const API_URL = "https://route.showapi.com/9-2"
//定义天气图标的图谱
const weatherImgMap = {
晴:"img/sunny.png",
小雨:"img/小雨.png",
雨:"https://img.icons8.com/fluency/96/000000/rain.png",
下雨:"https://img.icons8.com/fluency/96/000000/rain.png",
雷阵雨:
"https://img.icons8.com/fluency/96/000000/thunderstorm.png",
多云: "https://img.icons8.com/fluency/96/000000/cloud.png",
阴:"https://img.icons8.com/fluency/96/000000/clouds.png",
雪:"https://img.icons8.com/fluency/96/000000/snow.png"
};
//3.查询天气函数
async function queryWeather() {
const city = document.getElementById("city").value.trim();
const resultDom = document.getElementById("result");
//校验输入
if(!city) {
resultDom.innerHTML = "<p class='error'>请输入城市名称</p>"
return;
}
//显示加载状态
resultDom.innerHTML = "<p class='loading'>正在查询天气~</p>";
try {
//4.构造请求函数（包含appkey和城市）
const params = new URLSearchParams({
//核心：传递app Key作为认证参数
appkey: APP_KEY,
//城市参数（以文档要求为准）
area: city,
//其他可选参数（如日期、天气，根据API文档添加）
needindex: 1,
});
//5.调用API
const response = await fetch(`${API_URL}?${params}`);
const data = await response.json();
//6.解析返回函数（根据API文档的结构调整）
//假设API成功返回时 code 为0，具体为文档为准
if(data.showapi_res_code === 0) {
//主题函数
const weatherInfo = data.showapi_res_body;
//当天天气
const today = weatherInfo.f1;
const weatherText = today.day_weather || "未知"
const weatherImg = weatherImgMap[weatherText] ||"https://img.icons8.com/fluency/96/000000/question-mark.png"
//拼接展示内容
resultDom.innerHTML = `
<p>城市:${weatherInfo.cityInfo.c4}</p>
<p>日期:${today.day}</p>
<p>天气:<img src="${weatherImg}" class="weather-img">
${weatherText}</p>
<p>温度:${today.day_air_temperature}</p>
<p>风向:${today.night_wind_direction}</p>
<p>日出日落时间:${today.sun_begin_end}</p>
<p>感冒:${today.index_cold_desc}</p>
<p>化妆指数:${today.index_makeup_desc}</p>
<p>穿衣指数:${today.index_dress_desc}</p>
<p>舒适度:${today.index_comfort_desc}</p>
`;
} else {
//
resultDom.innerHTML = `<p class='error'>错误:${data.showapi_res_error || "查询错误"}</p>`;
}
} catch(error) {
//网络错误（如跨域、连接失败）
resultDom.innerHTML = `<p class='error'>网络错误:${error.message}</p>`;
}
}
</script>
</html>