基於JavaScript建立即時天氣預報應用-js教程-PHP中文網

基於JavaScript建立即時天氣預報應用

王林

發布： 2023-08-09 15:42:26

原創

1569 人瀏覽過

基於JavaScript建立即時天氣預報應用

隨著科技的發展，天氣預報已經成為生活中不可或缺的一部分。而使用JavaScript來建立即時天氣預報應用，能夠方便地取得並展示最新的天氣資訊。本文將介紹如何運用JavaScript來建立一個簡單的即時天氣預報應用，並附帶程式碼範例。

首先，我們需要取得天氣資料。天氣資料可以透過介面來取得，其中一個常用且免費的介面是OpenWeatherMap（https://openweathermap.org/）。在該網站上註冊並申請API金鑰，即可使用其介面取得即時天氣資料。

以下是取得天氣資料的步驟：

建立HTML文件
建立一個名為index.html的HTML文件，用於建立天氣預報應用的介面。在HTML檔案的body中新增一個id為"weather-app"的div元素和一個id為"search-form"的form元素，用來展示天氣資訊和搜尋框。

<!DOCTYPE html>
<html>
<head>
  <title>实时天气预报应用</title>
</head>
<body>
  <div id="weather-app">
    <form id="search-form">
      <input type="text" id="search-input" placeholder="输入城市名">
      <button type="submit">搜索</button>
    </form>
    <div id="weather-info"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>

登入後複製

建立JavaScript文件
在同目錄下建立一個名為app.js的JavaScript文件，用於處理天氣資料的取得和展示。

// 使用fetch方法获取天气数据
function getWeatherData(city) {
  const apiKey = 'YOUR_API_KEY'; // 替换成你的API密钥
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

  return fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      return {
        cityName: data.name,
        weather: data.weather[0].description,
        temperature: data.main.temp
      };
    });
}

// 更新天气信息
function updateWeatherInfo(weatherData) {
  const weatherInfo = document.getElementById('weather-info');
  weatherInfo.innerHTML = `
    <h2>${weatherData.cityName}</h2>
    <p>天气状况：${weatherData.weather}</p>
    <p>温度：${Math.round(weatherData.temperature - 273.15)}℃</p>
  `;
}

// 监听表单提交事件
const searchForm = document.getElementById('search-form');
searchForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const searchInput = document.getElementById('search-input');
  const city = searchInput.value;
  
  // 获取天气数据并更新天气信息
  getWeatherData(city)
    .then(data => updateWeatherInfo(data));
});

登入後複製

現在，你已經完成了一個簡單的即時天氣預報應用。使用者可以在搜尋框中輸入城市名，應用程式將會取得對應城市的天氣訊息，並在頁面上展示出來。

以上就是利用JavaScript建立即時天氣預報應用的步驟。透過呼叫天氣介面來取得數據，並使用JavaScript來處理和展示數據，我們可以輕鬆地建構出一個實用的天氣預報應用。當然，這只是一個簡單的例子，你可以根據自己的需求擴展和美化應用的功能和介面。

希望上述內容能幫助你，祝愉快程式設計！

以上是基於JavaScript建立即時天氣預報應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！