튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션)-JS 튜토리얼-php.cn

第 1 步 - 设置环境并收集所有资源

第 2 步 - 从 index.html 开始

第 3 步 - 设置索引文

第 4 步 - 获取 Weather API 和 Unsplash API 密钥

第 5 步 - 从 JavaScript 编码开始

1단계 - 환경 설정 및 모든 리소스 수집

2단계 - index.html로 시작

3단계 - 색인 텍스트 설정

4단계 - Weather API 및 Unsplash API 키 얻기

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

집

웹 프론트엔드

JS 튜토리얼

튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션)

奋力向前

Sep 15, 2021 pm 12:12 PM

css html js

이전 글 "HTML, CSS, JS를 사용하여 임의 비밀번호 생성기를 만드는 방법(공유)을 가르쳐주세요"에서는 html, css, js를 사용하여 임의 비밀번호 생성기를 만드는 방법을 소개했습니다. 다음 기사에서는 JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법을 함께 살펴보겠습니다.

튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션)

오늘은 Weather API를 사용하여 모든 도시, 지역 또는 국가를 검색하고 현재 날씨를 얻을 수 있는 멋진 날씨 앱을 만들어 보겠습니다. 또한 세련미를 더하기 위해 Unsplash API를 사이트의 배경 이미지로 사용했는데, 이 이미지는 입력한 위치를 기반으로 합니다. 카드에 기울기 효과와 유리 모양을 추가했습니다. 이 프로젝트에서 사용할 프로그래밍 언어는 HTML, CSS, JS입니다. 그럼 가구구구 가자. 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，链接您想要的谷歌字体。我使用过Poppins字体，这是我比较喜欢的字体之一。（谷歌字体）

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文件。

<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>",)

튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션) 前往Unsplash Source。在这里，您可以看到如何根据大小、文本、用户的喜好、收藏等以不同的方式调用图片。

튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션)

第 5 步 - 从 JavaScript 编码开始

在JavaScipt中集成API对于学习如何为Web应用程序使用API

결국 우리가 무엇을 성취할지 보세요🎜🎜🎜데모 주소: 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🎜
🎜Vanilla-Tilt.js 파일🎜

🎜🎜모든 리소스 주소를 다운로드하세요: https:/ /download.csdn.net/ download/qq_44273429/20463321🎜🎜

2단계 - index.html로 시작

🎜HTML 파일용 공통 템플릿으로 시작하세요. 원하는 경우 제목을 추가하세요. 🎜🎜style.css와 script.js를 연결하기 전에 원하는 Google 글꼴을 연결하세요. 저는 제가 가장 좋아하는 글꼴 중 하나인 Poppins 글꼴을 사용했습니다. (Google Fonts) 🎜🎜HTML🎜

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");

로그인 후 복사

🎜 이제 body에서 시작하여 웹사이트에 로더를 추가하려면 이를 body 태그에 추가한 다음 스크립트를 작성하면 됩니다. 🎜🎜HTML🎜rrreee🎜두 개의 별도 div를 만듭니다. 하나는 제목용이고 다른 하나는 카드용입니다. 그 아래에 적절한 div 태그를 추가하세요. 🎜🎜여기에서는 SVG 형식의 검색 버튼을 사용합니다. 카드 div 내부의 버튼에 이 코드를 사용할 수 있습니다. 🎜🎜HTML🎜rrreee🎜기본 아이콘 표시에 날씨 아이콘을 추가하세요. 🎜🎜HTML🎜rrreee🎜 Vanilla-Tilt js용 애니메이션 및 스크립트를 로드하는 중입니다. 텍스트가 끝나기 전에 추가하세요. 위의 1단계에서 언급한 리소스에 Vanilla-Tilt Js 파일을 추가했습니다. 🎜🎜JS🎜rrreee

3단계 - 색인 텍스트 설정

🎜 body 및 기타 요소의 스타일을 지정하여 시작하세요. 🎜🎜애니메이션 로딩 스타일을 설정하세요. 이 코드를 사용하여 스타일을 지정할 수 있습니다. 로딩 애니메이션의 배경이 흰색이므로 #fff를 사용했습니다. 리소스 폴더에 SVG 이미지를 추가했습니다. 🎜🎜CSS🎜rrreee🎜🎜CSS 코드를 얻으려면 Github 저장소를 참조하세요🎜🎜주소: https://github.com/wanghao221/Weather.io🎜🎜

4단계 - Weather API 및 Unsplash API 키 얻기

🎜OpenWeatherMap으로 이동하여 계정을 만드세요. 로그인 후 API 키 탭을 클릭하면 API 키가 표시됩니다. API 키를 복사하여 아래에 언급된 JavaScript 코드의 두 번째 줄에 붙여넣습니다(

apiKey: " <여기에 API 키 삽입>",</code). > )🎜🎜<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/238/146/183/1631678774953818.png"  class="lazy" title="1631678774953818.png" alt="위챗 스크린샷_20210915120609.png"/ > <code>Unsplash 소스

로 이동하세요. 여기서는 크기, 텍스트, 사용자 기본 설정, 즐겨찾기 등에 따라 다양한 방식으로 이미지를 불러올 수 있는 방법을 확인할 수 있습니다. 🎜🎜 위챗 스크린샷_20210915120729.png

🎜< h2>5단계 - JavaScript로 코딩 시작 🎜 웹 애플리케이션용 코딩 방법을 알아보려면 JavaScipt에 API를 통합하세요. code>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");

로그인 후 복사

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

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

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

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

即将推出的功能

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

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

项目中一些很酷的截图

튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션)

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

위 내용은 튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7870

자바 튜토리얼

1649

Cakephp 튜토리얼

1407

라라벨 튜토리얼

1301

PHP 튜토리얼

1244

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML에서 React의 역할 : 사용자 경험 향상 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

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩 버튼을 사용하는 방법 Apr 07, 2025 pm 03:09 PM

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

See all articles

튜토리얼: JS와 API를 사용하여 날씨 웹 애플리케이션을 만드는 방법(컬렉션)

第 1 步 - 设置环境并收集所有资源

第 2 步 - 从 index.html 开始

第 3 步 - 设置索引文

第 4 步 - 获取 Weather API 和 Unsplash API 密钥

第 5 步 - 从 JavaScript 编码开始

1단계 - 환경 설정 및 모든 리소스 수집

2단계 - index.html로 시작

3단계 - 색인 텍스트 설정

4단계 - Weather API 및 Unsplash API 키 얻기

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제