Création d'une application de prévisions météorologiques en temps réel basée sur JavaScript-js tutoriel-php.cn

Création d'une application de prévisions météorologiques en temps réel basée sur JavaScript

王林

Libérer： 2023-08-09 15:42:26

original

1569 Les gens l'ont consulté

Création dune application de prévisions météorologiques en temps réel basée sur JavaScript

Créez une application de prévisions météorologiques en temps réel basée sur JavaScript

Avec le développement de la technologie, les prévisions météorologiques sont devenues un élément indispensable de la vie. L'utilisation de JavaScript pour créer une application de prévisions météorologiques en temps réel permet d'obtenir et d'afficher facilement les dernières informations météorologiques. Cet article explique comment utiliser JavaScript pour créer une application simple de prévisions météorologiques en temps réel, avec des exemples de code.

Tout d’abord, nous devons obtenir des données météorologiques. Les données météorologiques peuvent être obtenues via des interfaces. L'une des interfaces couramment utilisées et gratuites est OpenWeatherMap (https://openweathermap.org/). Inscrivez-vous sur le site Web et demandez une clé API pour utiliser son interface afin d'obtenir des données météorologiques en temps réel.

Voici les étapes à suivre pour obtenir des données météorologiques :

Créer un fichier HTML
Créez un fichier HTML nommé index.html pour créer l'interface de l'application de prévisions météorologiques. Ajoutez un élément div avec l'ID "weather-app" et un élément de formulaire avec l'ID "search-form" au corps du fichier HTML pour afficher les informations météorologiques et les champs de recherche.

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

Copier après la connexion

Créer un fichier JavaScript
Créez un fichier JavaScript nommé app.js dans le même répertoire pour gérer l'acquisition et l'affichage des données météorologiques.

// 使用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));
});

Copier après la connexion

Maintenant, vous avez terminé une application simple de prévisions météorologiques en temps réel. Les utilisateurs peuvent saisir le nom de la ville dans le champ de recherche, et l'application obtiendra les informations météorologiques de la ville correspondante et les affichera sur la page.

Voici les étapes ci-dessus pour créer une application de prévisions météorologiques en temps réel à l'aide de JavaScript. En appelant l'interface météo pour obtenir des données et en utilisant JavaScript pour traiter et afficher les données, nous pouvons facilement créer une application de prévisions météorologiques pratique. Bien sûr, ce n'est qu'un exemple simple, vous pouvez étendre et embellir les fonctions et l'interface de l'application en fonction de vos propres besoins.

J'espère que le contenu ci-dessus pourra vous aider, et bonne programmation !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Création d'une application de prévisions météorologiques en temps réel basée sur JavaScript