正文

轻松学会JS获取天气：简单代码实现实时天气查询

/0 浏览量
1110

在数字化时代，获取天气信息已经变得非常便捷。今天，我将带你一起学习如何使用JavaScript编写简单的代码来实现实时天气查询功能。无论你是编程初学者还是有经验的开发者，这篇文章都将为你提供清晰的步骤和实用的代码示例。

选择天气API

首先，我们需要选择一个天气API来获取数据。这里我推荐使用OpenWeatherMap API，因为它提供了丰富的天气数据，并且有免费的使用额度。

注册API密钥

在OpenWeatherMap网站上注册一个账户，并创建一个新的API密钥。这个密钥将用于访问API并获取天气数据。

创建HTML结构

在HTML文件中，我们需要创建一个用于显示天气信息的元素。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时天气查询</title>
</head>
<body>
    <div id="weather-container">
        <h1>实时天气查询</h1>
        <input type="text" id="city-input" placeholder="请输入城市名">
        <button onclick="getWeather()">查询天气</button>
        <div id="weather-info"></div>
    </div>
    <script src="weather.js"></script>
</body>
</html>

编写JavaScript代码

接下来，我们将编写JavaScript代码来实现天气查询功能。以下是一个简单的JavaScript示例：

// 获取城市输入元素
const cityInput = document.getElementById('city-input');

// 获取天气信息元素
const weatherInfo = document.getElementById('weather-info');

// 查询天气的函数
function getWeather() {
    // 获取城市名
    const city = cityInput.value;

    // 构建API请求URL
    const apiKey = '你的API密钥';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    // 发送API请求
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 获取天气信息
            const temperature = data.main.temp;
            const weatherDescription = data.weather[0].description;
            const humidity = data.main.humidity;

            // 显示天气信息
            weatherInfo.innerHTML = `
                <h2>${city}的天气</h2>
                <p>温度：${temperature}℃</p>
                <p>天气描述：${weatherDescription}</p>
                <p>湿度：${humidity}%</p>
            `;
        })
        .catch(error => {
            // 处理错误
            weatherInfo.innerHTML = `<p>查询失败，请检查城市名是否正确。</p>`;
        });
}

运行和测试

将HTML和JavaScript代码保存到本地文件，并在浏览器中打开HTML文件。输入城市名并点击查询按钮，即可看到实时天气信息。

通过以上步骤，你就可以轻松学会使用JavaScript获取天气信息了。希望这篇文章对你有所帮助！如果你有任何疑问，欢迎在评论区留言。

-- 展开阅读全文 --