JavaScript 天气应用教程

本教程将带您一步步创建一个简单的天气应用。我们将使用 JavaScript 和一些前端技术来实现这个应用。

创建基本结构

首先，我们需要创建一个 HTML 页面，用于展示天气信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天气应用</title>
</head>
<body>
    <h1>本地天气</h1>
    <div id="weather"></div>
    <script src="weather.js"></script>
</body>
</html>

添加 JavaScript 代码

接下来，我们需要在 weather.js 文件中编写 JavaScript 代码，用于获取天气信息。

document.addEventListener('DOMContentLoaded', function() {
    const weatherDiv = document.getElementById('weather');
    fetch('https://api.openweathermap.org/data/2.5/weather?q=北京&appid=YOUR_API_KEY&units=metric')
        .then(response => response.json())
        .then(data => {
            weatherDiv.innerHTML = `
                <h2>北京天气</h2>
                <p>温度: ${data.main.temp}°C</p>
                <p>天气: ${data.weather[0].description}</p>
            `;
        });
});

在上面的代码中，我们使用 fetch API 获取天气数据，并将其显示在页面上。

使用本站链接

您可以访问本站更多JavaScript教程来获取更多关于JavaScript的知识。