当前温度:°C
最高温度:°C
最低温度:°C
湿度:%
风速:km/h
未来 7 天天气预报
日期
|
天气状况
|
最高温
|
最低温
|
script.js
javascript
// 获取天气数据
const getWeatherData = async () => {const response = await fetch('https://api.openweathermap.org/data/2.5/forecast?q=Shanghai&appid=YOUR_API_KEY&units=metric');const data = await response.json();return data;
};// 填充当前天气信息
const populateCurrentWeather = (data) => {document.getElementById('current-temperature').innerHTML = data.list[0].main.temp.toFixed(1);document.getElementById('max-temperature').innerHTML = data.list[0].main.temp_max.toFixed(1);document.getElementById('min-temperature').innerHTML = data.list[0].main.temp_min.toFixed(1);document.getElementById('humidity').innerHTML = data.list[0].main.humidity.toFixed(1);document.getElementById('wind-speed').innerHTML = data.list[0].wind.speed.toFixed(1);
};// 填充未来 7 天天气预报
const populateWeatherForecast = (data) => {const forecastTable = document.getElementById('weather-table');const tbody = forecastTable.querySelector('tbody');data.list.slice(1, 8).forEach((day) => {const newRow = document.createElement('tr');const dateCell = document.createElement('td');const weatherCell = document.createElement('td');const maxTempCell = document.createElement('td');const minTempCell = document.createElement('td');// 格式化日期const date = new Date(day.dt 1000);const formattedDate = date.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' });// 设置单元格内容dateCell.innerHTML = formattedDate;weatherCell.innerHTML = day.weather[0].main;maxTempCell.innerHTML = day.main.temp_max.toFixed(1);minTempCell.innerHTML = day.main.temp_min.toFixed(1);// 添加单元格到新行newRow.appendChild(dateCell);newRow.appendChild(weatherCell);newRow.appendChild(maxTempCell);newRow.appendChild(minTempCell);// 添加新行到表格主体tbody.appendChild(newRow);});
};// 获取并显示天气数据
getWeatherData().then((data) => {populateCurrentWeather(data);populateWeatherForecast(data);
});