html动态天气代码 HTML 动态天气代码

HTML 动态天气代码

在网站开发过程中，天气预报功能是常见的一个需求。今天介绍一种使用 HTML 和 JavaScript 实现动态天气信息的方法。

首先，我们需要一个 API 来获取天气数据。这里推荐使用 OpenWeatherMap 的 API。注册账号，获取 API key。

    
      // 发送 GET 请求，获取天气数据
      var requestUrl = "http://api.openweathermap.org/data/2.5/weather?q=CityName&appid=APIKey";
      var cityName = "北京";
      var apiKey = "your_api_key_here";

      requestUrl = requestUrl.replace("CityName",cityName).replace("APIKey",apiKey);

      var request = new XMLHttpRequest();
      request.open('GET',requestUrl);
      request.responseType = 'json';
      request.send();

      request.onload = function() {
        // 处理响应数据
        var weatherData = request.response;
        var weather = weatherData.weather[0];
        var temperature = weatherData.main.temp;
        var description = weather.description;
        var iconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png";

        // 在 HTML 中显示天气信息
        var weatherInfo = document.getElementById("weather-info");
        weatherInfo.innerHTML = "当前天气：" + description + "，温度：" + temperature + "K";
        var weatherIcon = document.getElementById("weather-icon");
        weatherIcon.src = iconUrl;
      }
    
    

上述代码使用了 XMLHttpRequest 对象发送 GET 请求，获取天气数据。请求 URL 中的 CityName 和 APIKey 需要替换成自己的城市名称和 API Key。

处理响应数据后，使用 JavaScript 修改 HTML 中的天气信息和图标，并加以显示。具体实现可以参考下面的 HTML 代码：

    
      

        
 天气预报 
        
 正在获取天气数据... 
        
      
    
    

上述代码创建了一个包含天气信息和天气图标的 div 元素，其中天气信息使用一个 p 元素显示，天气图标使用一个 img 元素显示。在 JavaScript 代码中通过 getElementById() 方法获取这两个元素，并修改其内容和属性。

上述代码可以让你在你的网站中实现一个简单的动态天气信息展示功能。如果你想要更完整的天气预报功能，可以参考一些开源库，例如 WeatherAPI 和 AccuWeather。