📌  相关文章
📜  使用 Vanilla JavaScript 的天气应用(1)

📅  最后修改于: 2023-12-03 15:36:34.842000             🧑  作者: Mango

使用 Vanilla JavaScript 的天气应用

本文将介绍如何使用 Vanilla JavaScript 制作一个天气应用，包括获取实时天气数据，渲染天气页面，以及基本的样式设置。

获取实时天气数据

我们可以使用第三方的天气 API（比如 Weather API），以获取实时的天气数据。以下是一个简单的获取天气数据的代码片段：

const api_key = "YOUR_API_KEY";
const city = "Beijing";
const fetchUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`;
fetch(fetchUrl)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

通过以上代码片段，我们可以请求实时的北京天气数据，具体来说，我们首先需要在Weather API注册并获得一个 API key，然后使用 fetch 函数请求天气数据。注意，返回的数据类型是一个 JSON 对象，我们可以根据需要提取其中的相关信息。

渲染天气页面

我们使用 DOM 操作来渲染天气页面。以下是一个简单的代码片段：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气应用</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="weather">
      <div class="icon"></div>
      <div class="temperature"></div>
      <div class="description"></div>
    </div>
    <script src="./app.js"></script>
  </body>
</html>

const weatherDiv = document.getElementById("weather");
const iconDiv = weatherDiv.querySelector(".icon");
const temperatureDiv = weatherDiv.querySelector(".temperature");
const descriptionDiv = weatherDiv.querySelector(".description");

function renderWeather(weather) {
  // 渲染天气图标
  iconDiv.style.backgroundImage = `url("https://openweathermap.org/img/wn/${weather.weather[0].icon}.png")`;
  // 渲染温度
  temperatureDiv.innerHTML = `${weather.main.temp} &deg;C`;
  // 渲染天气描述
  descriptionDiv.innerHTML = weather.weather[0].description;
}

renderWeather(data); // 根据上面获取到的数据，渲染天气页面

以上代码定义了一个简单的 HTML 页面，同时实现了渲染天气图标、温度和天气描述的功能。我们根据从 API 中获取到的数据，更新页面上的相关内容，从而呈现出实时的天气信息。

基本的样式设置

最后，我们需要设置一些基本的样式来提升天气应用的质感。以下是一个简单的 style.css 文件：

#weather {
  margin: auto;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  margin-top: 20px;
  width: 80px;
  height: 80px;
  background-size: cover;
}

.temperature {
  margin-top: 10px;
  font-size: 40px;
}

.description {
  margin-top: 10px;
  font-size: 20px;
}

以上代码通过设置 flex 属性实现了在垂直方向的居中对齐，并设置了合适的边距、背景图片和文字大小，从而使天气应用页面看起来更加美观。