前端显示气象数据

html文件如下

<div class="wt03">
<p class="wecss">气&nbsp;&nbsp;&nbsp;温：<span id="temperature_min"></span> ~ <span id="temperature_max"></span></p>
<p class="wecss">降水量：<span id="precipitation" ></span> mm</p>
<p class="wecss">风&nbsp;&nbsp;&nbsp;况：&nbsp;&nbsp;&nbsp;&nbsp;<span id="wind"></span>&nbsp;&nbsp;<span id="wind_speed"></span> </p>
</div>

其中css样式可以自定义

js文件中显示

$.ajax({
	type: "GET",
	//这个api调取除当前温度和降水量外的气象数据
	url: "https://tianqiapi.com/api?version=v6&appid=17129829&appsecret=Nlrg7OMf",
	dataType: 'JSON',
	success: function (res) {
		// 成功的回调
		console.log(res);
		document.getElementById("weather").textContent = res.wea;
		document.getElementById("temperature_max").textContent = res.tem1 + '℃';
		document.getElementById("temperature_min").textContent = res.tem2;

		document.getElementById("wind").textContent = res.win;
		document.getElementById("wind_speed").textContent = res.win_speed;
		document.getElementById("city").textContent = res.city;

		// 在请求成功的回调函数中处理cityen的值
		const cityen = res.cityEn;
		const apiKey = "05ae696a5f66a8d07126352ebf5cffc8";
		//这个api调取当前温度和降水量外的气象数据
		const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityen}&lang=zh_cn&appid=${apiKey}&units=metric`;
		fetch(url)
			.then(response => response.json())
			.then(data => {
				// 更新 HTML 中的内容
				document.getElementById("temperature").textContent =data.main.temp;
				document.getElementById("precipitation").textContent =data.rain?.["1h"] || "0";
			})
			.catch(error => {
				console.error("获取天气信息出错：", error);
			});
	}
});

// 定时器不需要修改
setTimeout(function() {
	location.reload();
}, 1800000); // 1800000毫秒等于30分钟