Maison > Article > interface Web > Création d'une application de prévisions météorologiques en temps réel basée sur JavaScript
Création d'une application de prévisions météorologiques en temps réel basée sur JavaScript
- 王林original
- 2023-08-09 15:42:261587parcourir
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>- 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));
});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!