教學篇：如何用JS和API製作天氣Web應用程式（收藏）-js教程-PHP中文網

第1 步- 設定環境並收集所有資源

從HTML 檔案的常用範本開始。根據需要添加標題。

從樣式

前往

#在

第 6 步 - 免费托管您的网站！

首頁

web前端

js教程

教學篇：如何用JS和API製作天氣Web應用程式（收藏）

奋力向前

Sep 15, 2021 pm 12:12 PM

css html js

之前的文章《手把教你使用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」或任何您想要的名字，然後建立這三個檔案並將這些資源加入資料夾：

#index.html
##style. css
script.js

我們需要的其他資源：

Favicon
Loading GIF (optional)
Vanilla-Tilt.js file

##下載所有這些資源位址：https://download.csdn.net/download/qq_44273429/20463321

第2 步驟- 從index.html 開始

從HTML 檔案的常用範本開始。根據需要添加標題。

在連結

style.css

和之前script.js，連結您想要的Google字體。我使用過Poppins字體，這是我比較喜歡的字體之一。（Google字體）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

開始，如果您希望在您的網站上新增載入程序，那麼您可以將其新增至正文標籤中，然後為其編寫腳本。 HTML

<body onload="myFunction()">

登入後複製

製作兩個單獨的div。一個用於

heading title

，一個用於卡片。在它下面添加合適的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 class="icon lazy"  src="/static/imghw/default1.png"  data-src="https://openweathermap.org/img/wn/04d.png"   alt=""  />
  <div class="description">多云</div>
</div>

登入後複製

載入動畫和

Vanilla-Tilt js

的腳本。在正文結束之前添加它。我在上面步驟 1 中提到的資源中添加了Vanilla-Tilt Js檔案。 JS

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

登入後複製

請參閱Github儲存庫以取得CSS 程式碼

位址：https://github.com/wanghao221/Weather.io

第4 步- 取得Weather API 和Unsplash API 金鑰

前往

OpenWeatherMap

並建立帳戶。登入後點擊API Keys選項卡中的，您將看到API金鑰。複製API Key並貼上到下面提到的JavaScript程式碼的第二行(apiKey: " <Insert API Key here>",)

前往

Unsplash Source 教學篇：如何用JS和API製作天氣Web應用程式（收藏）。在這裡，您可以看到如何根據大小、文字、用戶的喜好、收藏等以不同的方式呼叫圖片。

教學篇：如何用JS和API製作天氣Web應用程式（收藏）第5 步- 從JavaScript 編碼開始

#在

JavaScipt

中整合API對於學習如何為Web應用程式使用API至關重要。我已經列出了整個程式碼。你可以通過它並理解程式碼。 <p>我已将此调用"<code>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");

登入後複製

第 6 步 - 免费托管您的网站！

现在，当您完成编码后，您可以在您的网站上托管您自己的天气应用程序，或者您甚至可以在 Github 上免费托管它！！！

https://github.com/wanghao221/Weather.io

托管是可选的，但我建议将其发布并与您的朋友和家人共享，并将其添加到您的项目列表中。

即将推出的功能

这是我计划添加一些更酷的功能，例如

每当您打开网站时进行位置检测，它将显示其天气特定位置的相关天气新闻使背景图像更准确地显示位置使其对大多数设备（iPad 和平板电脑）的响应速度更快

项目中一些很酷的截图

教學篇：如何用JS和API製作天氣Web應用程式（收藏）

推荐学习：HTML/CSS视频教程、JS视频教程

以上是教學篇：如何用JS和API製作天氣Web應用程式（收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7711

Java教學

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1232

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

React在HTML中的作用：增強用戶體驗 Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

See all articles

教學篇：如何用JS和API製作天氣Web應用程式（收藏）

第1 步- 設定環境並收集所有資源

從HTML 檔案的常用範本開始。根據需要添加標題。

從樣式

前往

#在

第 6 步 - 免费托管您的网站！

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題