显示天气 JavaScript

天气对我们的日常生活有很大的影响，让我们可以提前了解气温、天气情况，便于我们做出决策和安排。 在这篇文章中，我们将介绍如何使用 JavaScript 来实现显示天气的功能。

使用 API 获取天气数据

首先，我们需要获取天气数据。现在有很多第三方提供的 API 可以使用，比如 OpenWeatherMap。我们可以在其网站上注册账号，获取 API Key，然后使用 JavaScript 发送 HTTP 请求来获取天气数据。

const apiKey = "YOUR_API_KEY";
const cityName = "YOUR_CITY_NAME";
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`;

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Error fetching weather data:", error);
  });

以上代码中，我们使用 fetch 函数发送 HTTP 请求，获取数据后通过 response.json() 方法将返回的数据解析为 JSON 对象。 解析后，我们可以从中提取我们需要的信息，比如当前气温、天气情况等等。

显示天气信息

有了获取天气数据的方法，我们就可以将其显示在我们的网页上。我们可以在 HTML 中定义一些用于显示天气信息的元素，比如：

<div>
  <h1 id="cityName"></h1>
  <p id="temperature"></p>
  <p id="weatherDescription"></p>
</div>

然后在 JavaScript 中，我们可以使用以下代码将获取到的天气信息显示到页面中：

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    const cityNameEl = document.querySelector("#cityName");
    const temperatureEl = document.querySelector("#temperature");
    const weatherDescriptionEl = document.querySelector("#weatherDescription");

    cityNameEl.textContent = data.name;
    temperatureEl.textContent = `Temperature: ${data.main.temp}℃`;
    weatherDescriptionEl.textContent = `Weather: ${data.weather[0].description}`;
  })
  .catch(error => {
    console.error("Error fetching weather data:", error);
  });

以上代码中，我们先使用 document.querySelector 方法获取页面中所需的元素节点， 然后使用 textContent 属性将获取到的天气信息赋值到元素节点上。

结语

上面的示例代码演示了如何使用 JavaScript 获取天气信息，并将获取到的信息显示在页面上。 当然，天气显示功能的实现方法还有很多，我们可以使用 jQuery、Vue.js 等前端框架来实现，这取决于你的项目需求和技术栈。