javascript
// script.jsconst cityInput = document.querySelector('city');
const result = document.querySelector('result');
const currentTemp = document.querySelector('current-temp');
const currentWeather = document.querySelector('current-weather');
const forecastList = document.querySelector('forecast-list');const apiKey = 'YOUR_API_KEY';function getWeather(city) {fetch(`${city}&appid=${apiKey}&units=metric`).then(response => response.json()).then(data => {const { main, weather } = data;currentTemp.innerHTML = `${main.temp} °C`;currentWeather.innerHTML = weather[0].description;}).catch(error => {console.error('Error fetching weather:', error);alert('无法获取天气数据，请稍后再试。');});fetch(`${city}&appid=${apiKey}&units=metric`).then(response => response.json()).then(data => {const forecast = data.list.slice(0, 24);forecast.forEach(forecast => {const { dt, main, weather } = forecast;const date = new Date(dt 1000);const time = date.toLocaleTimeString();const temp = main.temp;const weatherDescription = weather[0].description;const icon = weather[0].icon;const item = document.createElement('div');item.classList.add('forecast-item');item.innerHTML = `
${time}
${temp} °C
${weatherDescription}
`;forecastList.appendChild(item);})}).catch(error => {console.error('Error fetching forecast:', error);alert('无法获取天气预报数据，请稍后再试。');});
}document.querySelector('form').addEventListener('submit', (e) => {e.preventDefault();const city = cityInput.value;if (!city) {alert('请输入城市名称。');return;}result.classList.remove('hidden');getWeather(city);
});
