HTML、CSS 和 JS 来制作一个很棒的🌦天气应用程序

本节实验我将带大家一起用 HTML、CSS 和 Javascript 来制作一个很棒的🌦天气应用程序🌧，我们可以在其中搜索任何城市🗺或地区🌎，这里我使用了 OpenWeatherMap API 获取输入位置的天气，使用 Unsplash API 来制作网站的背景图片，并且为卡片添加了倾斜效果和毛玻璃外观。

图片说明

在线演示戳这里👉 https://haiyong.site/lanqiao/23

知识点

onload 事件
调用 API

基本结构

├── css
│ └── style.css
├── js
│ ├── script.js
│ └── vanilla-tilt.js
├── icon.png
├── loading.svg
└── index.html

从 index.html 开始

从 HTML 文件的常用模板开始，根据需要添加标题。
在链接 style.css 和 script.js 之前，我们先链接谷歌字体。这里我使用的是 Poppins 字体，这也是我比较喜欢的字体之一。

<link
href="https://fonts.googleapis.com/css2family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,800&display=swap"
rel="stylesheet">

现在从<body>开始，如果你希望向你的网站添加加载程序，你可以将其添加到<body>标签中，然后为其编写脚本。

<body onload="myFunction()">

onload 事件会在页面或图像加载完成后立即发生，通常用于<body>元素，在页面完全载入后(包括图片、css 文件等等)执行脚本代码。
制作两个单独的 div。一个用于搜索框，一个用于卡片。在它下面添加合适的 div 标签。
这里我使用了一个 SVG 格式的搜索按钮。你可以将此代码用于卡片 div 中的按钮。

<div class="search">
    <input type="text" class="search-bar" placeholder="Search" />
    <button>
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em"
            width="1.5em" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z"
                clip-rule="evenodd"></path>
            <path fill-rule="evenodd"
                d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"
                clip-rule="evenodd"></path>
        </svg>
    </button>
</div>
<div class="weather loading">
    <div class="other">注意：请输入城市名拼音，首字母大写</div>
    <h2 class="city">Weather in Shanghai</h2>
    <h1 class="temp">21°C</h1>
    <div class="flex">
        <img src="https://labfile.oss.aliyuncs.com/courses/8605/04d.png" alt="" class="icon" />
        <div class="description">多云</div>
    </div>
    <div class="other">
        <div class="humidity">湿度: 60%</div>
        <div class="wind">风速: 6.2 km/h</div>
    </div>
</div>

为默认图标显示添加天气图标，图片来源于 openweathermap.org

<div class="flex">
  <img src="https://labfile.oss.aliyuncs.com/courses/8605/04d.png" alt="" class="icon" />
  <div class="description">多云</div>
</div>

图片说明

在<body>标签中添加加载动画和 vanilla-tilt.js。

<script>
        var preloader = document.getElementById('loading');
        function myFunction() {
            preloader.style.display = 'none';
        }
</script>
<script type="text/javascript" src="js/vanilla-tilt.js"></script>
    <script type="text/javascript">
        VanillaTilt.init(document.querySelector(".card"), {
            max: 15,
            glare: true,
            reverse: true,
            "max-glare": 0.5,
            speed: 400
        });
        VanillaTilt.init(document.querySelectorAll(".card"));
</script>

设置 index.html 的样式

设置加载动画的样式，你可以使用下面的代码对其进行样式设置。由于加载动画是白色背景，因此我使用了#fff。

#loading{
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #fff url('/loading.svg')
  no-repeat center;
  z-index: 99999;
}

获取 Weather API 和 Unsplash API 密钥

前往 OpenWeatherMap 并创建一个帐户。登录后单击 API Keys 选项卡你将看到 API 密钥。复制 API Key 并粘贴到下面提到的 JavaScript 代码的第二行 (apiKey: " <Insert API Key here>",)

图片说明

前往 Unsplash Source。在这里，你可以看到根据大小、文本、喜好、收藏等不同的方式调用图片。

图片说明

JavaScript 代码

在 JavaScipt 中集成 API 对于学习如何为 Web 应用程序添加 API 至关重要。我已经列出了完整代码。你可以通过它并理解代码。
我这里调用"url('https://source.unsplash.com/1600x900/?city " + name + "')"用于背景图像。你可以根据需要自定义 URL。
我还使用了上海市的默认天气 weather.fetchWeather("Shanghai");。你可以在此处添加任何城市的名称。每当你加载网站时，都会弹出这个城市的天气。

let weather = {
  apiKey: "<Insert API Key here>",
  fetchWeather: function (city) {
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
        city +
        "&units=metric&appid=" +
        this.apiKey
    )
      .then((response) => response.json())
      .then((data) => this.displayWeather(data));
  },
  displayWeather: function (data) {
    const { name } = data;
    const { icon, description } = data.weather[0];
    const { temp, humidity } = data.main;
    const { speed } = data.wind;
    document.querySelector(".city").innerText = "Weather in " + name;
    document.querySelector(".icon").src =
      "https://openweathermap.org/img/wn/" + icon + ".png";
    document.querySelector(".description").innerText = description;
    document.querySelector(".temp").innerText = temp + "°C";
    document.querySelector(".humidity").innerText =
      "湿度: " + humidity + "%";
    document.querySelector(".wind").innerText =
      "风速: " + speed + " km/h";
    document.querySelector(".weather").classList.remove("loading");
    document.body.style.backgroundImage =
      "url('https://source.unsplash.com/1600x900/?city " + name + "')";
    document.body.style.backgroundRepeat = "none";
    document.body.style.backgroundSize = "100";
    document.body.style.width = "100%";
    document.body.style.height = "100%";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";

  },
  search: function () {
    this.fetchWeather(document.querySelector(".search-bar").value);
  },
};

document.querySelector(".search button").addEventListener("click", function () {
  weather.search();
});

document
  .querySelector(".search-bar")
  .addEventListener("keyup", function (event) {
    if (event.key == "Enter") {
      weather.search();
    }
  });

weather.fetchWeather("Shanghai");