前端开发：简单的天气查询应用

Mr_Paizong

于 2024-07-30 20:16:30 发布

阅读量251

点赞数 9

文章标签：前端 html5 json css

本文链接：https://blog.csdn.net/Mr_Zhangyuge/article/details/140805683

版权

创建一个简单的天气查询应用

在这次的项目中，我们将创建一个基本的天气查询应用。用户只需要输入一个城市名称，然后点击查询按钮，应用就会从OpenWeatherMap获取该城市的当前天气信息，并将其显示为一个简单的网页。

基本结构

我们将使用HTML、CSS和JavaScript来开发这个应用。以下是项目的基本结构：

index.html - 网页的主文件，包含了HTML代码。
styles.css - 用于给网页添加样式的CSS文件。
script.js - 包含JavaScript代码的文件，用于与用户交互和显示天气信息。

获取天气API的密钥

为了从OpenWeatherMap获取天气信息，你需要先注册一个账号并获取一个免费的API密钥。注册过程很简单，你可以直接在OpenWeatherMap上完成。

HTML代码

在这个文件中，我们创建了应用的基本布局，包括一个输入城市名称的文本框、一个查询按钮和一个显示天气信息的区域。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询应用</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>天气查询应用</h1>
        <div class="input-group">
            <input type="text" id="city-input" placeholder="输入城市名称">
            <button id="search-button">查询天气</button>
        </div>
        <div id="weather-info" class="weather-info"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码

CSS用于给应用添加一些基本的样式，使它看起来更有吸引力。

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.input-group {
    display: flex;
    gap: 10px;
}

#city-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#search-button {
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

#search-button:hover {
    background-color: #0056b3;
}

.weather-info {
    margin-top: 20px;
    font-size: 18px;
}

JavaScript代码

JavaScript代码用于处理用户输入和与OpenWeatherMap API的通信。

document.addEventListener('DOMContentLoaded', () => {
    const apiKey = 'YOUR_API_KEY'; // 替换为你自己的API密钥
    const cityInput = document.getElementById('city-input');
    const searchButton = document.getElementById('search-button');
    const weatherInfo = document.getElementById('weather-info');

    searchButton.addEventListener('click', async () => {
        const city = cityInput.value.trim();
        if (city) {
            try {
                const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=zh`);
                if (!response.ok) {
                    throw new Error('城市未找到');
                }
                const data = await response.json();
                displayWeather(data);
            } catch (error) {
                weatherInfo.innerHTML = `<p style="color: red;">${error.message}</p>`;
            }
        } else {
            weatherInfo.innerHTML = '<p style="color: red;">请输入城市名称</p>';
        }
    });

    function displayWeather(data) {
        const { name, main, weather } = data;
        weatherInfo.innerHTML = `
            <h2>${name}</h2>
            <p>温度: ${main.temp}°C</p>
            <p>天气: ${weather[0].description}</p>
            <p>湿度: ${main.humidity}%</p>
        `;
    }
});