!!!
天气预报平台源码介绍
前言
今天给大家介绍一个源码,一个十分简单的天气预报源码,有API功能。可以查询任意地区天气。
源码概述
本源码是一个基于网页的应用程序,旨在为用户提供实时的天气信息。无论用户身处何地,该平台都能够帮助他们获取当前的天气状况,包括温度、湿度、风速等关键信息。用户只需输入城市名称,或使用自动定位功能,即可快速获取所需的天气数据。
主要功能
- 自动获取用户位置:使用浏览器的地理位置 API 自动获取用户当前的位置,并根据位置查询天气信息,提升了用户体验。
- 手动城市查询:用户可以手动输入城市名称进行天气查询,支持多种城市名称。
- 详细的天气信息展示:以表格形式展示天气信息,清晰易懂,涵盖天气状况、温度、湿度和风速等关键信息。
- 错误处理与用户反馈:当无法获取天气数据时,平台会向用户显示详细的错误信息,方便用户进行操作。
- 响应式设计:支持在各种设备上自适应显示,提供良好的使用体验,保证在手机和平板等不同屏幕尺寸上均可正常使用。
技术栈
该项目使用以下技术实现:
- 前端:HTML、CSS、JavaScript,结合现代浏览器 API 提供动态交互效果。
- 数据获取:使用 Fetch API 与第三方天气数据服务(如
wttr.in
)进行数据请求,获取实时天气信息。
代码示例
以下是如何调用天气数据的示例代码:
function getWeatherByCity(city) {
fetch(`https://wttr.in/${city}?format=%C,%t,%h,%w`)
.then(response => {
if (!response.ok) {
throw new Error('无法获取天气数据');
}
return response.text();
})
.then(data => {
// 处理天气数据
})
.catch(error => {
console.error(error);
});
}
源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气预报平台</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e8f4fa;
margin: 0;
padding: 0;
}
.header {
padding: 20px;
background-color: #3eaf7c;
color: white;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input, .form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group button {
width: 100%;
padding: 10px;
background-color: #3eaf7c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.form-group button:hover {
background-color: #319e67;
}
.weather-info {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.weather-info table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.weather-info th, .weather-info td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
.weather-info th {
background-color: #3eaf7c;
color: white;
}
.error-message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>天气预报平台</h1>
</div>
<div class="container">
<div class="form-group">
<label for="cityInput">输入城市名(或自动获取位置)</label>
<input type="text" id="cityInput" placeholder="输入城市名">
</div>
<div class="form-group">
<button id="getWeatherBtn">查询天气</button>
</div>
<div class="weather-info" id="weatherInfo" style="display: none;">>
<table>
<thead>
<tr>
<th>天气状况</th>
<th>温度</th>
<th>湿度</th>
<th>风速</th>
</tr>
</thead>
<tbody>
<tr>
<td id="weatherCondition"></td>
<td id="temperature"></td>
<td id="humidity"></td>
<td id="windSpeed"></td>
</tr>
</tbody>
</table>
<p class="error-message" id="errorMessage"></p>
</div>
</div>
<script>
document.getElementById('getWeatherBtn').addEventListener('click', function() {
const city = document.getElementById('cityInput').value;
if (city) {
getWeatherByCity(city);
} else {
document.getElementById('errorMessage').innerText = '请输入城市名';
}
});
function getWeatherByCity(city) {
fetch(`https://wttr.in/${city}?format=%C,%t,%h,%w`)
.then(response => {
if (!response.ok) {
throw new Error('无法获取天气数据');
}
return response.text();
})
.then(data => {
const weatherInfo = data.split(',');
document.getElementById('weatherCondition').innerText = weatherInfo[0];
document.getElementById('temperature').innerText = weatherInfo[1];
document.getElementById('humidity').innerText = weatherInfo[2];
document.getElementById('windSpeed').innerText = weatherInfo[3];
document.getElementById('weatherInfo').style.display = 'block';
document.getElementById('errorMessage').innerText = '';
})
.catch(error => {
document.getElementById('errorMessage').innerText = error.message;
document.getElementById('weatherInfo').style.display = 'none';
});
}
</script>
</body>
</html>
总结
天气预报平台通过现代化的技术手段,为用户提供方便、快捷的天气查询服务。无论是自动获取位置还是手动查询,平台都致力于为用户提供准确的天气信息,帮助他们更好地规划日常生活和活动。此外,项目的可扩展性也使得未来能够进一步增加新功能,如历史天气查询和天气预警通知等。
!!!
评论 (0)