javascript 获取天气

JavaScript是一种广泛应用于网页交互的脚本语言，其功能强大，并能够通过调用服务API来获取大量有意义的数据。其中，获取天气数据是其中一个常见的应用，在这篇文章中，我们将介绍如何使用JavaScript来获取天气数据并在网页中进行展示。

首先，我们需要找到有效的天气API来获取数据，全球许多城市都有这样的API来源，例如Open Weather Map API和Yahoo Weather API。在此，我们选择Open Weather Map API，并使用其免费版实现。

const apikey = "your_api_key";
    const city = "Hong Kong";
const url = `http://api.openweathermap.org/data/2.5/weather?q=${
city}
    &
appid=${
apikey}
    `;
    

上述代码给定了API密钥，城市名称和请求URL的模板。使用实时的天气数据进行实际操作，如下所示：

fetch(url).then(response =>
    response.json()).then(data =>
{
    const city = data.name;
    const temp = (data.main.temp - 273.15).toFixed(1);
    const weather = data.weather[0].description;
console.log(`Current temperature in ${
city}
 is ${
temp}
℃. Weather condition is ${
weather}
    .`);
}
    );
    

这里我们使用fetch方法从Open Weather Map API获得JSON数据，并对返回的数据进行后续处理。 在这个例子中，我们提取了当前天气的城市名称，温度（以摄氏度为单位）和天气状况，并在控制台中以字符串形式打印出这些数据。

然而，使用console.log在控制台中显示天气情况不是很有用，我们需要在我们的网页中显示。为此，我们使用JavaScript来更新网页中的HTML元素，以显示天气信息。

fetch(url).then(response =>
    response.json()).then(data =>
{
    const city = data.name;
    const temp = (data.main.temp - 273.15).toFixed(1);
    const weather = data.weather[0].description;
const icon = `http://openweathermap.org/img/w/${
data.weather[0].icon}
    .png`;
    const location = document.querySelector('.location');
location.innerText = `${
city}
    `;
    const temperature = document.querySelector('.temperature');
temperature.innerHTML = `${
temp}
     ℃`;
    const conditions = document.querySelector('.conditions');
conditions.innerHTML = `${
weather}
     `;
}
    );
    

在上面的示例中，我们首先添加代表城市，温度和天气状况的类，然后使用querySelector从DOM树中选择这些元素。 然后，我们将获得的数据分配给相应的元素InnerHTML。 此外，我们还可以在网页中添加一个天气图标来补充天气信息，只需在IMG的SRC属性中添加对应的图标链接即可。

总结

通过JavaScript获取天气数据是一项常见的任务，尤其是在构建许多细节和重要功能的网站时，因为天气数据通常与某些网站功能直接相关。在这篇文章中，我们学习了如何使用Open Weather Map API获取天气数据，以及如何使用fetch方法获取来自API的JSON数据，然后展示在网页中。我们还看到了如何使用querySelector选择DOM树中的元素，并使用innerHTML将数据插入到网页中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！