正文

学会用JS轻松实现天气预报查询

/0 浏览量
0402

在这个信息爆炸的时代，获取天气预报已经成为我们日常生活中不可或缺的一部分。使用JavaScript（JS）来轻松实现天气预报查询，不仅可以提高我们的编程技能，还能让我们随时随地掌握天气变化。下面，我将为你详细介绍如何使用JS实现一个简单的天气预报查询功能。

准备工作

在开始之前，你需要准备以下几样东西：

  1. HTML文件：用于展示查询界面和天气信息。
  2. CSS文件（可选）：用于美化界面。
  3. JavaScript文件：用于实现查询逻辑和获取天气数据。

HTML结构

首先，我们需要创建一个简单的HTML文件，其中包含输入框、按钮和用于显示天气信息的容器。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天气预报查询</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <input type="text" id="cityName" placeholder="请输入城市名">
        <button id="queryBtn">查询天气</button>
        <div id="weatherInfo"></div>
    </div>
    <script src="weather.js"></script>
</body>
</html>

CSS样式

接下来，我们可以为这个简单的界面添加一些样式，让页面看起来更美观。

/* styles.css */
.container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="text"] {
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
}

button {
    padding: 5px 10px;
    cursor: pointer;
}

#weatherInfo {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

JavaScript逻辑

现在，我们来编写JavaScript代码，实现查询天气的功能。

// weather.js
document.getElementById('queryBtn').addEventListener('click', function() {
    var cityName = document.getElementById('cityName').value;
    if (!cityName) {
        alert('请输入城市名！');
        return;
    }
    // 调用API获取天气数据
    getWeatherData(cityName);
});

function getWeatherData(cityName) {
    var url = 'https://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&appid=你的API密钥&units=metric';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            displayWeatherInfo(data);
        }
    };
    xhr.send();
}

function displayWeatherInfo(data) {
    var weatherInfo = document.getElementById('weatherInfo');
    weatherInfo.innerHTML = `
        <h3>${data.name}</h3>
        <p>温度：${data.main.temp}℃</p>
        <p>天气：${data.weather[0].description}</p>
    `;
}

在上面的代码中，我们使用了OpenWeatherMap提供的API来获取天气数据。你需要注册一个账号并获取一个API密钥，将你的API密钥替换为你的实际API密钥。

总结

通过以上步骤，你就可以使用JavaScript轻松实现一个天气预报查询功能了。当然，这只是一个简单的示例，你可以根据自己的需求进行扩展和优化。例如，你可以添加更多的天气信息，如湿度、风速等，或者为界面添加更多的交互效果。希望这篇文章能帮助你入门JavaScript编程，并在实践中不断进步！

-- 展开阅读全文 --