Membina aplikasi ramalan cuaca masa nyata berdasarkan JavaScript-tutorial js-php.cn

Jadual Kandungan

${weatherData.cityName}

Rumah

hujung hadapan web

tutorial js

Membina aplikasi ramalan cuaca masa nyata berdasarkan JavaScript

Aug 09, 2023 pm 03:42 PM

javascript ramalan cuaca masa sebenar

Membina aplikasi ramalan cuaca masa nyata berdasarkan JavaScript

Bina aplikasi ramalan cuaca masa nyata berdasarkan JavaScript

Dengan perkembangan teknologi, ramalan cuaca telah menjadi bahagian yang amat diperlukan dalam kehidupan. Menggunakan JavaScript untuk membina aplikasi ramalan cuaca masa nyata boleh mendapatkan dan memaparkan maklumat cuaca terkini dengan mudah. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membina aplikasi ramalan cuaca masa nyata yang ringkas, dengan contoh kod.

Pertama, kita perlu mendapatkan data cuaca. Data cuaca boleh diperolehi melalui antara muka Salah satu antara muka yang biasa digunakan dan percuma ialah OpenWeatherMap (https://openweathermap.org/). Daftar di tapak web dan mohon kunci API untuk menggunakan antara mukanya untuk mendapatkan data cuaca masa nyata.

Berikut adalah langkah-langkah untuk mendapatkan data cuaca:

Buat fail HTML
Buat fail HTML bernama index.html untuk membina antara muka aplikasi ramalan cuaca. Tambahkan elemen div dengan ID "apl cuaca" dan elemen borang dengan ID "borang carian" pada badan fail HTML untuk memaparkan maklumat cuaca dan kotak carian.

<!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>

Salin selepas log masuk

Buat fail JavaScript
Buat fail JavaScript bernama app.js dalam direktori yang sama untuk mengendalikan pemerolehan dan paparan data cuaca.

// 使用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 id="weatherData-cityName">${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));
});

Salin selepas log masuk

Kini, anda telah melengkapkan aplikasi ramalan cuaca masa nyata yang ringkas. Pengguna boleh memasukkan nama bandar dalam kotak carian, dan aplikasi akan mendapatkan maklumat cuaca bandar yang sepadan dan memaparkannya pada halaman.

Di atas adalah langkah-langkah untuk membina aplikasi ramalan cuaca masa nyata menggunakan JavaScript. Dengan memanggil antara muka cuaca untuk mendapatkan data, dan menggunakan JavaScript untuk memproses dan memaparkan data, kami boleh membina aplikasi ramalan cuaca praktikal dengan mudah. Sudah tentu, ini hanya contoh mudah, anda boleh mengembangkan dan mencantikkan fungsi dan antara muka aplikasi mengikut keperluan anda sendiri.

Saya harap kandungan di atas dapat membantu anda, dan selamat berprogram!

Atas ialah kandungan terperinci Membina aplikasi ramalan cuaca masa nyata berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn