之前的文章《手把教你使用HTML、CSS和JS制作隨機(jī)密碼生成器(分享)》中,給大家介紹了怎么使用html、css和js制作隨機(jī)密碼生成器。下面本篇文章給大家介紹如何用JS和API制作天氣Web應(yīng)用程序,我們一起看看怎么做。
今天我將制作一個(gè)很棒的天氣應(yīng)用程序,我們可以在其中搜索任何城市、地區(qū)或國(guó)家/地區(qū),并使用Weather API
獲取其當(dāng)前天氣。此外,為了給它添加一些修飾,我還使用了Unsplash API
作為網(wǎng)站的背景圖片,這將基于您輸入的位置。我為卡片添加了傾斜效果和玻璃化外觀。我們將在這個(gè)項(xiàng)目中使用的編程語(yǔ)言是HTML
、CSS
和JS
。所以讓我們咕咕咕。
看看我們將要實(shí)現(xiàn)的最終樣子
演示地址:https://wanghao221.github.io/Weather.io/
bilibili展示視頻:https://www.bilibili.com/video/BV1xX4y1c7Z4
注意:我在文中只提到了您應(yīng)該/可能在代碼中使用的幾個(gè)關(guān)鍵點(diǎn)和步驟。因?yàn)?,這是一個(gè)博客,而不是代碼庫(kù),所以我想保持簡(jiǎn)潔。如果您想?yún)⒖颊麄€(gè)代碼地址https://github.com/wanghao221/Weather.io 去看看吧!
第 1 步 – 設(shè)置環(huán)境并收集所有資源
使用您喜歡的代碼編輯器,創(chuàng)建一個(gè)名為“Weather App
”或任何您想要的名字,然后創(chuàng)建這三個(gè)文件并將這些資源添加到文件夾中:
-
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 開(kāi)始
從HTML 文件的常用模板開(kāi)始。根據(jù)需要添加標(biāo)題。
在鏈接style.css
和之前script.js
,鏈接您想要的谷歌字體。我使用過(guò)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">
現(xiàn)在從body
開(kāi)始,如果您希望向您的網(wǎng)站添加加載程序,那么您可以將其添加到正文標(biāo)簽中,然后為其編寫(xiě)腳本。
HTML
<body onload="myFunction()">
制作兩個(gè)單獨(dú)的div。一個(gè)用于heading title
,一個(gè)用于卡片。在它下面添加合適的div標(biāo)簽。
這里我使用了一個(gè)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>
為默認(rèn)圖標(biāo)顯示添加天氣圖標(biāo)。
HTML
<div class="flex"> <img src="https://openweathermap.org/img/wn/04d.png" alt="" class="icon" /> <div class="description">多云</div> </div>
加載動(dòng)畫(huà)和Vanilla-Tilt js
的腳本。在正文結(jié)束之前添加它。我在上面步驟 1 中提到的資源中添加了Vanilla-Tilt Js
文件。
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>
第 3 步 – 設(shè)置索引文
從樣式body
和其他元素開(kāi)始。
設(shè)置加載動(dòng)畫(huà)的樣式。您可以使用此代碼對(duì)其進(jìn)行樣式設(shè)置。由于加載動(dòng)畫(huà)具有白色背景,因此我使用了#fff。
我在資源文件夾中添加了SVG
圖像。
CSS
#loading{ position: fixed; width: 100%; height: 100vh; background: #fff url('/loading.svg') no-repeat center; z-index: 99999; }
請(qǐng)參閱Github存儲(chǔ)庫(kù)以獲取 CSS 代碼
地址:https://github.com/wanghao221/Weather.io
第 4 步 – 獲取 Weather API 和 Unsplash API 密鑰
前往OpenWeatherMap
并創(chuàng)建一個(gè)帳戶(hù)。登錄后單擊API Keys
選項(xiàng)卡中的 ,您將看到API
密鑰。復(fù)制API Key
并粘貼到下面提到的 JavaScript
代碼的第二行 (apiKey: " <Insert API Key here>",
)
前往
Unsplash Source
。在這里,您可以看到如何根據(jù)大小、文本、用戶(hù)的喜好、收藏等以不同的方式調(diào)用圖片。
第 5 步 – 從 JavaScript 編碼開(kāi)始
在JavaScipt
中集成API
對(duì)于學(xué)習(xí)如何為Web
應(yīng)用程序使用API
至關(guān)重要。我已經(jīng)列出了整個(gè)代碼。你可以通過(guò)它并理解代碼。
我已將此調(diào)用"url('https://source.unsplash.com/1600x900/?city " + name + "'
)"用于背景圖像。您可以根據(jù)需要自定義URL
。
我還使用了上海市的默認(rèn)天氣weather.fetchWeather("Shanghai");
。您可以在此處添加任何城市的名稱(chēng)。每當(dāng)您加載網(wǎng)站時(shí),都會(huì)彈出這個(gè)城市的天氣。
JS
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 = "風(fēng)速: " + 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");
第 6 步 – 免費(fèi)托管您的網(wǎng)站!
現(xiàn)在,當(dāng)您完成編碼后,您可以在您的網(wǎng)站上托管您自己的天氣應(yīng)用程序,或者您甚至可以在 Github 上免費(fèi)托管它?。。?/p>
https://github.com/wanghao221/Weather.io
托管是可選的,但我建議將其發(fā)布并與您的朋友和家人共享,并將其添加到您的項(xiàng)目列表中。
即將推出的功能
這是我計(jì)劃添加一些更酷的功能,例如
每當(dāng)您打開(kāi)網(wǎng)站時(shí)進(jìn)行位置檢測(cè),它將顯示其天氣特定位置的相關(guān)天氣新聞使背景圖像更準(zhǔn)確地顯示位置使其對(duì)大多數(shù)設(shè)備(iPad 和平板電腦)的響應(yīng)速度更快
項(xiàng)目中一些很酷的截圖
推薦學(xué)習(xí):HTML/CSS視頻教程、JS視頻教程