jmeter 

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.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;
		}
		/*.weather-img{
			width: 24px;
			height: 24px;
		}*/
	</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>
</body>
<script type="text/javascript">
	//		1.定义appkey
	const APP_KEY = "585BE81052C14bF6A030Dec5c246c498"
	//		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.构造请求参数
			const params = new URLSearchParams({
				appKey: APP_KEY, // 核心：传递appKey作为认证参数
				area: city, // 城市参数（以文档要求为准）
				// 其他可选参数（如日期、天数，根据API文档添加）
				needIndex: 1
			})
			//5.调用api
			const response = await fetch(`${API_URL}?${params}`);
			const data = await response.json();
			//6.解析返回数据
			//假设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] || ""
				//拼接展示函数
				resultDom.innerHTML = `
       		  <p>城市:${weatherInfo.cityInfo.c3}</p>
       		  <p>日期:${today.day}</p>
       		  <p>天气:<img src="${weatherImg}" class="weather-img">${weatherText}</p>
   		      <p>化妆指数:${today.index.beauty.title}</p>
              <p>穿衣指数:${today.index.clothes.title}</p>
              <p>舒适度:${today.index.comfort.title}</p>
     		  <p>防感冒建议:${today.index.cold.title}</p>
       		  <p>温度:${today.day_air_temperature}</p>
       		  <p>风向:${today.night_wind_direction}</p>
       		  <p>日出日落时间:${today.sun_begin_end}</p>`
			} else {
				//API返回错误信息
				resultDom.innerHTML = `<p class='error'>错误:${data.showapi_res_error || "查询失败"}</p>`
			}
		} catch(error) {
			//网络错误
			resultDom.innerHTML = `<p class='error'>网路错误:${error.message}</p>`
		}

	}
	//定义天气图标的图谱
	const weatherImgMap = {
		晴: "img/晴.png",
		大雨: "img/大雨.png",
		小雨: "img/小雨.png",
		雷阵雨: "img/雷阵雨.png",
		阴: "img/阴天.png",
		多云: "img/多云.png",
		雪: "img/雪.png"
	}
	//页面加载时默认查询
	window.onload = queryWeather
</script>
posted @ 2025-12-30 08:06  孙盛美  阅读(13)  评论(0)    收藏  举报