当前位置：首页 > 前端开发 > 正文

html如何获取实时天气预报

admin
前端开发
2025-08-09
57

获取实时天气预报，可以使用HTML结合JavaScript调用天气API（如OpenWeatherMap），通过AJA

HTML中获取实时天气预报，通常需要借助一些外部的API服务和JavaScript来实现，以下是详细的步骤和示例代码,帮助你理解如何实现这一功能。

选择合适的天气API

你需要选择一个提供实时天气预报的API服务,常见的天气API有：

OpenWeatherMap: 提供丰富的天气数据,支持多种语言和单位。
WeatherAPI: 提供简洁的天气数据接口。
AccuWeather: 提供详细的天气信息和预报。

以OpenWeatherMap为例,你需要注册一个账号并获取API密钥。

html如何获取实时天气预报第1张

创建HTML结构

在HTML文件中，创建一个基本的结构,包括一个用于显示天气信息的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">实时天气预报</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #weather-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        #weather-container h1 {
            margin-bottom: 20px;
        }
        #weather-container table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        #weather-container th, #weather-container td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        #weather-container th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <div id="weather-container">
        <h1>实时天气预报</h1>
        <table id="weather-table">
            <thead>
                <tr>
                    <th>城市</th>
                    <th>温度</th>
                    <th>天气状况</th>
                    <th>湿度</th>
                    <th>风速</th>
                </tr>
            </thead>
            <tbody>
                <!-天气数据将动态插入这里 -->
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

编写JavaScript代码

在script.js文件中,编写代码来调用天气API并获取实时天气数据。

// 你的OpenWeatherMap API密钥
const apiKey = 'YOUR_API_KEY';
// 获取天气数据的函数
async function getWeatherData(city) {
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error('网络响应不是OK');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('获取天气数据时出错:', error);
        return null;
    }
}
// 显示天气数据的函数
function displayWeatherData(data) {
    const tableBody = document.getElementById('weather-table').getElementsByTagName('tbody')[0];
    tableBody.innerHTML = ''; // 清空表格内容
    const row = tableBody.insertRow();
    row.insertCell(0).textContent = data.name; // 城市名称
    row.insertCell(1).textContent = `${data.main.temp} °C`; // 温度
    row.insertCell(2).textContent = data.weather[0].description; // 天气状况
    row.insertCell(3).textContent = `${data.main.humidity} %`; // 湿度
    row.insertCell(4).textContent = `${data.wind.speed} m/s`; // 风速
}
// 获取并显示天气数据
async function showWeather() {
    const city = 'Beijing'; // 你可以更改为任何城市
    const weatherData = await getWeatherData(city);
    if (weatherData) {
        displayWeatherData(weatherData);
    } else {
        console.error('无法获取天气数据');
    }
}
// 页面加载完成后显示天气数据
window.onload = showWeather;

解释代码

HTML部分: 创建了一个基本的页面结构，包括一个表格用于显示天气数据,CSS样式使页面看起来更美观。
JavaScript部分:
- getWeatherData(city): 这个函数使用fetch API从OpenWeatherMap获取指定城市的天气数据。units=metric参数确保温度以摄氏度显示。
- displayWeatherData(data): 这个函数将获取到的天气数据插入到HTML表格中。
- showWeather(): 这个函数调用getWeatherData获取数据，并调用displayWeatherData显示数据,页面加载完成后自动调用此函数。