CSS 样式表
css{box-sizing: border-box;
}body {font-family: sans-serif;
}.container {display: flex;justify-content: center;gap: 20px;
}.city-container {width: 250px;padding: 20px;background-color: f5f5f5;
}h2 {margin-top: 0;
}.weather-container {display: flex;align-items: center;justify-content: center;gap: 20px;
}.weather-icon {width: 64px;height: 64px;background-image: url("weather-icons.png");
}.weather-temperature {font-size: 24px;
}.weather-description{font-size: 16px;
}脚本
javascript
// 获取合肥的天气数据
fetch("https://api.openweathermap.org/data/2.5/weather?q=hefei,cn&appid=YOUR_API_KEY").then(response => response.json()).then(data => {// 更新合肥的天气数据document.querySelector(".city-container:first-child .weather-temperature").textContent = `${data.main.temp - 273.15}°C`;document.querySelector(".city-container:first-child .weather-description").textContent = data.weather[0].description;// 设置合肥的天气图标const weatherIcon = document.querySelector(".city-container:first-child .weather-icon");weatherIcon.style.backgroundImage = `url("weather-icons.png")`;weatherIcon.style.backgroundPosition = `-${data.weather[0].icon 64}px 0`;});// 获取上海的天气数据
fetch("https://api.openweathermap.org/data/2.5/weather?q=shanghai,cn&appid=YOUR_API_KEY").then(response => response.json()).then(data => {// 更新上海的天气数据document.querySelector(".city-container:last-child .weather-temperature").textContent = `${data.main.temp - 273.15}°C`;document.querySelector(".city-container:last-child .weather-description").textContent = data.weather[0].description;// 设置上海的天气图标const weatherIcon = document.querySelector(".city-container:last-child .weather-icon");weatherIcon.style.backgroundImage = `url("weather-icons.png")`;weatherIcon.style.backgroundPosition = `-${data.weather[0].icon 64}px 0`;});
