天氣預報 js代碼,天氣預報 js代碼查詢

陳慧珊 2024-11-14 11:07:09 145 74

在這篇文章中，天氣天氣我們將探討如何使用 JavaScript 獲取和顯示當?shù)氐念A報預報天氣預報。我們將借助公眾的代碼代碼 API 來實現(xiàn)這一功能，并提供清晰的查詢代碼示例，幫助你輕松實現(xiàn)天氣預報的天氣天氣獲取和展示。

使用公開的預報預報天氣 API

為了獲取天氣數(shù)據(jù)，我們需要選擇一個可用的代碼代碼氣象 API，如 OpenWeatherMap、查詢WeatherAPI 或其他天氣查詢接口。天氣天氣這些 API 通常提供了詳細的預報預報氣象數(shù)據(jù)，包括溫度、代碼代碼濕度、查詢風速等信息。天氣天氣

步驟一：注冊和獲取 API 密鑰

你需要去你選擇的預報預報天氣 API 的官方網(wǎng)站注冊一個賬號，并申請一個 API 密鑰。代碼代碼這個密鑰通常是在請求天氣數(shù)據(jù)時需要附加的，用于身份驗證和限制訪問。

步驟二：搭建基本的 HTML 頁面

接下來，創(chuàng)建一個簡單的 HTML 頁面，來展示天氣預報。在這個頁面中，你需要有一個文本輸入框，用于用戶輸入城市名，以及一個按鈕，用來觸發(fā)天氣查詢。

<!DOCTYPE html><html><head>    <title>天氣預報</title></head><body>    <h1>天氣預報查詢</h1>    <input type="text" id="city" placeholder="輸入城市名">    <button id="getWeather">獲取天氣</button>    <div id="weatherResult"></div>    <script src="weather.js"></script></body></html>

步驟三：編寫 JavaScript 代碼

在你的 JavaScript 文件（weather.js）中，編寫代碼來響應用戶的輸入，并調用 API 獲取天氣數(shù)據(jù)。

const apiKey = '你的API密鑰'; // 替換為你的 API 密鑰const weatherButton = document.getElementById('getWeather');weatherButton.addEventListener('click', () => {    const city = document.getElementById('city').value;    const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;    fetch(weatherUrl)        .then(response => response.json())        .then(data => {            const weatherDetails = `城市: ${data.name}, 溫度: ${data.main.temp}°C, 濕度: ${data.main.humidity}%`;            document.getElementById('weatherResult').innerText = weatherDetails;        })        .catch(error => {            document.getElementById('weatherResult').innerText = "未能獲取天氣數(shù)據(jù)，請檢查城市名或稍后再試。";        });});

通過以上步驟，我們成功搭建了一一個簡單的天氣預報查詢應用。用戶可以輸入城市名稱，獲取相關的天氣信息。這段代碼展示了如何利用 JavaScript 和天氣 API 提供實時天氣數(shù)據(jù)，使用這類技術可以為你的網(wǎng)站增添許多趣味和實用功能。

在這篇文章中，我們介紹了使用 JavaScript 獲取和展示天氣預報的基本步驟，包括注冊 API、設置 HTML 界面和編寫 JavaScript 代碼。希望這些信息能幫助你構建出自己的天氣查詢應用并充分利用天氣 API。