CSS 样式表 style.css
css
body {font-family: Arial, Helvetica, sans-serif;font-size: 14px;
}h1 {margin-bottom: 20px;
}.forecast-container {display: flex;flex-wrap: wrap;justify-content: space-around;
}.forecast-item {width: 200px;margin: 10px;padding: 10px;border: 1px solid ccc;border-radius: 5px;
}.forecast-date {font-size: 16px;font-weight: bold;margin-bottom: 5px;
}.forecast-weather {font-size: 14px;margin-bottom: 5px;
}.forecast-temperature{font-size: 14px;
}JavaScript 脚本 script.js
javascript
// 根据 JSON 数据动态生成天气预报const forecastData = [{ date: '2023-03-08', weather: '晴', temperature: '10℃~18℃' },{ date: '2023-03-09', weather: '晴', temperature: '11℃~19℃' },// 以下数据省略...
];const forecastContainer = document.querySelector('.forecast-container');// 遍历数据并生成 HTML 元素
forecastData.forEach(data => {const forecastItem = document.createElement('div');forecastItem.classList.add('forecast-item');const forecastDate = document.createElement('div');forecastDate.classList.add('forecast-date');forecastDate.textContent = data.date;const forecastWeather = document.createElement('div');forecastWeather.classList.add('forecast-weather');forecastWeather.textContent = data.weather;const forecastTemperature = document.createElement('div');forecastTemperature.classList.add('forecast-temperature');forecastTemperature.textContent = data.temperature;// 将元素添加到父容器中forecastItem.appendChild(forecastDate);forecastItem.appendChild(forecastWeather);forecastItem.appendChild(forecastTemperature);forecastContainer.appendChild(forecastItem);
});此 HTML、CSS 和 JavaScript 代码组合在一起，将为杭州提供 40 天的天气预报，包括日期、天气状况和温度范围。预报将在网页上以整洁美观的方式动态呈现。
