首先要去到对应网站的控制台,查看请求路径和参数,然后直接上源码,这里只展示js,对应的html元素不明白怎么写的话问下AI就行了。
document.addEventListener("DOMContentLoaded", function() { const textP = document.getElementById("text"); const weatherImg = document.getElementById("weatherImg"); const humidityP = document.getElementById("humidity"); const windDirP = document.getElementById("windDir"); const temp= document.getElementById("temp"); getResult(); function getResult() { const cityID = "101281001"; const url = `https://devapi.qweather.com/v7/weather/now?location=${cityID}&key=your_key`; fetch(url) .then(response => response.json()) .then(data => updateUI(data)) .catch(() => textP.innerHTML = "获取天气信息失败,请检查城市天气ID"); } function updateUI(data) { const { now } = data; textP.innerHTML = now.text; humidityP.innerHTML = now.humidity; windDirP.innerHTML = now.windDir; temp.innerHTML = now.temp; // 根据不同的text值给weatherImg的src属性赋不同的值 switch (now.text) { case "晴": weatherImg.src = "/晴.png"; break; case "多云": weatherImg.src = "/多云.png"; break; case "阴": weatherImg.src = "/阴.png"; break; case "小雨": weatherImg.src = "/小雨.png"; break; case "中雨": weatherImg.src = "/中雨.png"; break; case "小雨": weatherImg.src = "/大雨.png"; break; case "阵雨": weatherImg.src = "/阵雨.png"; break; case "雷阵雨": weatherImg.src = "/雷阵雨.png"; break; case "暴雨": weatherImg.src = "/暴雨到大暴雨.png"; break; case "雪": weatherImg.src = "snowy.jpg"; break; default: weatherImg.src = "default.jpg"; break; } } });
效果图如下