我使用simpleweather.js成功地展示天气更新,并且我试图让预测图标出现在预测日之外。
使用:
$(document).ready(function() {
$.simpleWeather({
location: 'Melborune, Australia',
unit: 'c',
success: function(weather) {
html = '<h2><i class="icon-'+weather.code+'"></i>'+weather.temp+'°'+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+'°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非常陌生。任何帮助将不胜感激。
答案 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 + '°' + 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 + '°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