チュートリアル：JSとAPIを使った天気Webアプリケーションの作り方（コレクション）-jsチュートリアル-php.cn

チュートリアル：JSとAPIを使った天気Webアプリケーションの作り方（コレクション）

奋力向前

リリース： 2021-09-15 13:35:34

転載

2772 人が閲覧しました

前回の記事「HTML、CSS、JSを使ってランダムパスワードジェネレーターを作る方法を教えます(共有)」では、html、css、jsを使って、ランダムなパスワードを作成するパスワードジェネレーター。次の記事では、JS と API を使用して天気 Web アプリケーションを作成する方法を紹介しますので、一緒に見てみましょう。

チュートリアル：JSとAPIを使った天気Webアプリケーションの作り方（コレクション）

今日は、あらゆる都市、地域、国を検索し、Weather API を使用して最新の天気予報を取得できる素晴らしい天気アプリを作成します。天気。さらに、それに磨きをかけるために、入力した場所に基づいてサイトの背景画像として Unsplash API も使用しました。カードに傾斜効果とガラスのような外観を追加しました。このプロジェクトで使用するプログラミング言語は、HTML、CSS、および JS です。それでは、グーグーグーしましょう。

私たちが達成する最終的な外観を見てください

デモアドレス: https://wanghao221.github.io/Weather.io/

bilibili ショービデオ: https://www.bilibili.com/video/BV1xX4y1c7Z4

注: 記事内でコード内で使用する必要がある/使用できる可能性があるものをいくつかだけ紹介しました重要なポイントと手順。これはコードベースではなくブログなので、シンプルにしておきたいと思います。コード全体のアドレス https://github.com/wanghao221/Weather.io を参照したい場合は、ご覧ください。

ステップ 1 - 環境をセットアップし、すべてのリソースを収集する

お気に入りのコードエディターを使用して、「Weather App」などという名前の新しいアプリケーションを作成します。希望の名前が必要な場合は、次の 3 つのファイルを作成し、次のリソースをフォルダーに追加します:

index.html
style.css
#script.js

必要なその他のリソース:

Favicon
GIF の読み込み (オプション)
Vanilla-Tilt.js ファイル

すべてをダウンロードしますリソースアドレス: https ://download.csdn.net/download/qq_44273429/20463321

ステップ 2 - Index.html

HTML ファイルの共通テンプレートから開始します。必要に応じてタイトルを追加します。

style.css と script.js をリンクする前に、必要な Google フォントをリンクします。私はお気に入りのフォントの 1 つである Poppins フォントを使用しました。 (Google Fonts)

HTML

<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 タグに追加してから、そのためのスクリプトを書きます。

HTML

<body onload="myFunction()">

ログイン後にコピー

2 つの別々の div を作成します。 1 つは

見出しタイトル 用、もう 1 つはカード用です。その下に適切な div タグを追加します。

ここでは、

SVG 形式の検索ボタンを使用します。このコードは、カード div のボタンに使用できます。

HTML

<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>

ログイン後にコピー

デフォルトのアイコン表示に天気アイコンを追加します。

HTML

<div class="flex">
  <img src="https://openweathermap.org/img/wn/04d.png" alt="" class="icon" />
  <div class="description">多云</div>
</div>

ログイン後にコピー

アニメーションと

Vanilla-Tilt js スクリプトを読み込みます。本文の末尾の前に追加します。 Vanilla-Tilt Js ファイルを上記の手順 1 で説明したリソースに追加しました。

<script>
        var preloader = document.getElementById(&#39;loading&#39;);
        function myFunction() {
            preloader.style.display = &#39;none&#39;;
        }
</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>

ログイン後にコピー

ステップ 3 - インデックステキストを設定する

スタイル

body およびその他の要素から始めます。

アニメーションの読み込みスタイルを設定します。このコードを使用してスタイルを設定できます。ローディングアニメーションは背景が白なので

#fffを使用しました。 リソースフォルダーに SVG 画像を追加しました。

CSS

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

ログイン後にコピー

CSS コードについては、Github リポジトリを参照してください。
アドレス: https://github.com/wanghao221/Weather.io

ステップ 4 - Weather API と Unsplash API キーを取得する

OpenWeatherMap に移動し、アカウントを作成します。ログイン後、API Keys タブをクリックすると、API キーが表示されます。 API キー をコピーし、下記の JavaScript コードの 2 行目に貼り付けます (apiKey: " ",)

チュートリアル：JSとAPIを使った天気Webアプリケーションの作り方（コレクション） Unsplash ソースに移動します。ここでは、サイズ、テキスト、ユーザー設定、お気に入りなどに基づいて、さまざまな方法で画像を呼び出す方法を確認できます。

チュートリアル：JSとAPIを使った天気Webアプリケーションの作り方（コレクション）

ステップ 5 - JavaScript コーディングを開始する

JavaSciptAPI の方法を学習するための 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(&#39;https://source.unsplash.com/1600x900/?city " + name + "&#39;)";
    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");

ログイン後にコピー