实时天气
实时气温:℃
实时风速:m/s
实时风向:
实时湿度:%
实时能见度:km
日出时间:
日落时间:
紫外线指数:
预报天气
历史天气数据
script.js
javascript
// 获取实时天气数据
function getRealtimeWeather() {fetch('https://api.example.com/weather/realtime').then(response => response.json()).then(data => {document.getElementById('current-temperature').innerText = data.temperature;document.getElementById('current-wind-speed').innerText = data.windSpeed;document.getElementById('current-wind-direction').innerText = data.windDirection;document.getElementById('current-humidity').innerText = data.humidity;document.getElementById('current-visibility').innerText = data.visibility;document.getElementById('sunrise').innerText = data.sunrise;document.getElementById('sunset').innerText = data.sunset;document.getElementById('uv-index').innerText = data.uvIndex;});
}// 获取预报天气数据
function getForecastWeather() {fetch('https://api.example.com/weather/forecast').then(response => response.json()).then(data => {const tbody = document.getElementById('forecast-table').querySelector('tbody');data.forEach(forecast => {const row = document.createElement('tr');const dateCell = document.createElement('td');const weatherCell = document.createElement('td');const maxTempCell = document.createElement('td');const minTempCell = document.createElement('td');dateCell.innerText = forecast.date;weatherCell.innerText = forecast.weather;maxTempCell.innerText = forecast.maxTemp;minTempCell.innerText = forecast.minTemp;row.appendChild(dateCell);row.appendChild(weatherCell);row.appendChild(maxTempCell);row.appendChild(minTempCell);tbody.appendChild(row);});});
}// 获取历史天气数据
function getWeatherHistory(startDate, endDate) {fetch('https://api.example.com/weather/history', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({startDate: startDate,endDate: endDate})}).then(response => response.json()).then(data => {let html = '
';data.forEach(weatherData => {html += `
-
日期:${weatherData.date}
`;html += `最高气温:${weatherData.maxTemp}℃
`;html += `最低气温:${weatherData.minTemp}℃
`;html += `平均气温:${weatherData.avgTemp}℃
`;html += `平均湿度:${weatherData.avgHumidity}%
`;html += `平均风速:${weatherData.avgWindSpeed}m/s
`;html += `
`;});html += '
';document.getElementById('weather-history-container').innerHTML = html;});
}// 初始化页面
window.addEventListener('DOMContentLoaded', () => {getRealtimeWeather();getForecastWeather();// 为历史天气查询表单添加提交事件监听器const form = document.getElementById('weather-history-form');form.addEventListener('submit', (event) => {event.preventDefault();const startDate = event.target.querySelector('input[name="start-date"]').value;const endDate = event.target.querySelector('input[name="end-date"]').value;getWeatherHistory(startDate, endDate);});
});