查询天气HTML

a 
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
    .container {
      max-width: 500px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 10px;
    }
    .input-group {
      margin-bottom: 20px;
    }
    input {
      padding: 8px;
      width: 200px;
      margin-right: 10px;
    }
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    .weather-box {
      margin-top: 20px;
      padding: 15px;
      border: 1px dashed #666;
      border-radius: 5px;
    }
    .error {
      color: #f00;
    }
    .loading {
      color: #666;
    }
  </style>
</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>
<script>
	//1.定义appkey
	const APP_KEY = "55952d0086F645C88F11B9662AC52Dd2";
	//2.API地址
	const API_URL ="https://route.showapi.com/9-2";
	//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({
			appKey:APP_KEY,//核心：传递appkey作为认证参数
			area:city,//城市参数（以文档要求为准）
			//其他可选参数（如日期·天数。根据API文档添加）
		});
		//5.调用API
		const response = await fetch(`${API_URL}?${params}`);
		const data = await response.json();
		//6.解析返回数据（根据APL文档的结构调整）
		//假设APL成功返回同时 code为0 请以文档为准
		if(data.showapi_res_code === 0){
			const weatherInfo = data.showapi_res_body;//主体数据
			const today = weatherInfo.f1;//当天天气
			//拼接展示内容
			resultDom.innerHTML = `
			<p>城市:${weatherInfo.cityInfo.c4}</p>
			<p>日期:${today.day}</p>
			<p>天气:${today.day_weather}</p>
			<p>温度:${today.day_air_temperature}</p>
			<p>风向:${today.night_wind_direction}</p>
			<p>化妆指数:${weatherInfo.beauty}</p>
			`;
		}else{
			resultDom.innerHTML = `<p class = 'error'>错误:${data.showapi_res_error||"查询失败"</p>`};
		}
	}catch(error){
		resultDom.innerHTML = `<p class = 'error'>网络错误:${error.message}</p>`;
	}
}
window.onload = queryWeather;
</script>
</body>
posted @ 2025-12-30 09:05  I'm云云  阅读(4)  评论(0)    收藏  举报