天气预报平台源码分享:轻松获取实时天气信息

天气预报平台源码分享:轻松获取实时天气信息

滴智科技
2024-10-19 / 0 评论 / 搜一下 / 18 阅读 / 正在检测是否收录...

!!!

天气预报平台源码分享

天气预报平台源码介绍

前言

今天给大家介绍一个源码,一个十分简单的天气预报源码,有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>
    

总结

天气预报平台通过现代化的技术手段,为用户提供方便、快捷的天气查询服务。无论是自动获取位置还是手动查询,平台都致力于为用户提供准确的天气信息,帮助他们更好地规划日常生活和活动。此外,项目的可扩展性也使得未来能够进一步增加新功能,如历史天气查询和天气预警通知等。

© 2024 滴智科技. 保留所有权利。

!!!

0

评论 (0)

取消