使用html,做一个简单的天气预报网页,天气图标动态显示,
时间: 2024-10-28 18:09:27 浏览: 18
易语言天气预报网页
创建一个简单的天气预报网页,你可以使用HTML、CSS和JavaScript(或者一个现代框架如Vue或React)。以下是基本步骤:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>天气预报</h1>
</header>
<main>
<div id="weather-info">
<img src="" class="weather-icon" alt="当前天气图标">
<p id="temperature">0°C</p>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
```
2. **CSS样式** (styles.css):
```css
.weather-icon {
width: 50px;
height: 50px;
margin-right: 10px;
}
```
3. **JavaScript动态更新** (script.js):
```javascript
// 假设从API获取的数据
const weatherData = { icon: 'sunny', temperature: '25°C' };
function displayWeather() {
document.getElementById('weather-icon').src = `icons/${weatherData.icon}.png`; // 假设你有一个包含各种天气图标的icons文件夹
document.getElementById('temperature').innerText = weatherData.temperature;
}
// 更新实际天气数据的地方
// 示例:每隔一段时间从API获取新数据并调用displayWeather()
setInterval(() => {
fetch('https://api.example.com/weather')
.then(response => response.json())
.then(data => {
if (data && data.icon && data.temperature) {
weatherData = data;
displayWeather();
}
})
.catch(error => console.error('Error:', error));
}, 60000); // 每分钟更新一次
// 初始加载时显示数据
displayWeather();
```
在这个例子中,我们假设已经有一个预定义的天气图标库,并通过网络请求获取实时天气数据。然后,我们会根据返回的天气信息动态改变图片和温度显示。
阅读全文