html免费天气预报代码

在现代社会中，天气状态的变化常常会引起人们的注意。如果你也想让你的网站用最简单的方式展示当地天气预报，HTML无疑是最好的选择之一。在本文中，我们将向大家介绍一种免费HTML天气预报代码。

!DOCTYPE html>
    html>
    head>
      title>
    天气预报/title>
      meta charset="UTF-8">
      meta name="viewport" content="width=device-width, initial-scale=1.0">
      style>
    .container {
          text-align: center;
          margin-top: 30px;
    }
    .left {
          display: inline-block;
          text-align: left;
    }
      /style>
    /head>
    body>
      div class="container">
        h1>
    当地天气预报/h1>
        p>
    今天是span class="left">
{
{
{
today_date}
}
}
    /span>
    /p>
        p>
    天气情况：span class="left">
{
{
{
today_weather}
}
}
    /span>
    /p>
        p>
    气温：span class="left">
{
{
{
today_temperature}
}
}
    /span>
    /p>
        p>
    风力：span class="left">
{
{
{
today_wind}
}
}
    /span>
    /p>
      /div>
      script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js">
    /script>
      script>
    $(function () {
      $.ajax({
        type: 'GET',        url: 'http://api.openweathermap.org/data/2.5/weather?q={
{
{
city}
}
}
    &
    lang=zh_cn&
    units=metric&
APPID={
{
{
YOUR_API_KEY}
}
}
',        success: function (data) {
              var today_date = new Date().toLocaleDateString();
              var today_weather = data.weather[0].description;
              var today_temperature = data.main.temp + '℃';
              var today_wind = data.wind.speed + 'm/s ' + data.wind.deg + '°';
          $('.container').find('.left').each(function () {
                var key = $(this).html();
                var value = eval(key.toLowerCase());
                $(this).html(value);
          }
    );
        }
,        error: function () {
              $('.container').html('发生了一个错误');
        }
      }
    );
    }
    );
      /script>
    /body>
    /html>
    

如您所见，这是一段利用Ajax从OpenWeatherMap API获取当地天气预报的代码。您只需简单修改city和YOUR_API_KEY即可。如果您还不了解Ajax和HowWeatherMap API，不要担心，都可以通过简单的搜索找到中文文档进行学习。希望这个HTML天气预报代码可以帮助到您！

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