Simpleweather.js - 预测项目的图标

时间:2015-02-05 05:48:53

标签: jquery weather

我使用simpleweather.js成功地展示天气更新,并且我试图让预测图标出现在预测日之外。

使用:

$(document).ready(function() {
  $.simpleWeather({
  location: 'Melborune, Australia',
  unit: 'c',
  success: function(weather) {
  html = '<h2><i class="icon-'+weather.code+'"></i>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
  html += '<ul><li><i style="color:#000" class="icon-'+weather.code+'"></i>'+weather.city+', '+weather.region+'</li>';
  html += '<li class="currently">'+weather.currently+'</li>';
  html += '<li>'+weather.alt.temp+'&deg;C</li></ul>';

  for(var i=0;i<weather.forecast.length;i++) {
    html += '<p><i style="color:#000" class="icon-'+weather.code+'"></i>'+weather.forecast[i].day+': '+weather.forecast[i].high+'</p>';
  }

  $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

我可以四处移动,它会显示当前临时图标,但我不知道预测日期的图标代码是什么。

对不起,我对使用API​​非常陌生。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

forecast[X].image返回X天条件代码的完整尺寸图片网址。希望这个我意味着你的意思交配.. :)

$(document).ready(function () {
    $.simpleWeather({
        location: 'Melborune, Australia',
        unit: 'c',
        success: function (weather) {
            html = '<h2><i class="icon-' + weather.code + '"></i>' + weather.temp + '&deg;' + weather.units.temp + '</h2>';
            html += '<ul><li><i style="color:#000" class="icon-' + weather.code + '"></i>' + weather.city + ', ' + weather.region + '</li>';
            html += '<li class="currently">' + weather.currently + '</li>';
            html += '<li>' + weather.alt.temp + '&deg;C</li></ul>';

            for (var i = 0; i < weather.forecast.length; i++) {
                img = '<img style="float:left;" width="125px" src="' + weather.forecast[i].image + '">';
                html += '<p>' + img + '<i style="color:#000" class="icon-' + weather.code + '"></i>' + weather.forecast[i].day + ': ' + weather.forecast[i].high + '</p>';
            }

            $("#weather").html(html);
        },
        error: function (error) {
            $("#weather").html('<p>' + error + '</p>');
        }
    });
});

小提琴here