如何有效使用JavaScript天气API来增强你的网页应用？

您提供的内容“js 天气api”指的是使用JavaScript编程语言来访问和利用天气数据API的服务。这些API通常允许开发者获取实时的天气信息，包括温度、湿度、风速、天气预报等，以便在网站或应用程序中显示或进行进一步处理。

JS天气API源码详解

1. API选择与注册

你需要选择一个天气API，有许多免费和付费的天气API可供选择，例如OpenWeatherMap、Weatherbit等，在本教程中，我们将使用OpenWeatherMap作为示例。

步骤1：注册并获取API密钥

访问OpenWeatherMap官网（https://openweathermap.org/）并注册一个账户，完成注册后，你将获得一个API密钥，用于访问其服务。

2. 创建HTML页面

创建一个HTML文件，并在其中添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Weather App</title>
</head>
<body>
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city name">
    <button onclick="getWeather()">Get Weather</button>
    <div id="weatherInfo"></div>
    <script src="weather.js"></script>
</body>
</html>

3. 编写JavaScript代码

在同一目录下创建一个名为weather.js的文件，并添加以下内容：

const apiKey = 'YOUR_API_KEY'; // 替换为你的API密钥
function getWeather() {
    const city = document.getElementById('city').value;
    if (!city) {
        alert('Please enter a city name');
        return;
    }
    fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric)
        .then(response => response.json())
        .then(data => displayWeather(data))
        .catch(error => console.error('Error:', error));
}
function displayWeather(data) {
    const weatherInfo = document.getElementById('weatherInfo');
    if (data.cod === '404') {
        weatherInfo.innerHTML = 'City not found';
        return;
    }
    const temp = data.main.temp;
    const description = data.weather[0].description;
    weatherInfo.innerHTML =Temperature: ${temp}°C <br> Description: ${description};
}

4. 运行应用

保存HTML和JavaScript文件，然后在浏览器中打开HTML文件，输入城市名称，点击“Get Weather”按钮，你应该能看到该城市的当前温度和天气描述。

如何有效使用JavaScript天气API来增强你的网页应用？

发表回复