作为我的第一个使用 API 的应用程序,我决定使用 Dark Sky API。我正在尝试为从 JS 文件生成的每个预测日添加动画 Skycons。我已阅读 StackOverflow 上有关 Skycon 问题的其他帖子,但我自己没有取得任何进展。
我已经更改了我的 initJS,以便通过类名称查找天气类型,但附加图标仍然不成功。
我的 HTML 脚本:
<script>
var icons = new Skycons({"color": "#fff"}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for(i = list.length; i--; ) {
var weatherType = list[i],
elements = document.getElementsByClassName( weatherType );
for (e = elements.length; e--;){
icons.set( elements[e], weatherType );
}
}
icons.play();
如何创建包含图标的预测 div:
//HTML to append to document
var html =
'<div class="forecast-list"><ul class="list">' +
'<li class="item" id="day">' + forecastDay + '</li>' +
//The canvas tag is where the SKYCON should show up
'<li class="item"><canvas class="' + forecastIcon + '" width="128" height="128"></canvas></li>' +
'<li class="item forecastTemp" id="max">' + forecastMax + '</li>' +
'<li class="item forecastTemp" id="min">' + forecastMin + '</li>' +
'</ul></div><br><br>';
//Append HTML to document
$('.forecast').append(html);
我的代码笔的链接:http://codepen.io/DDD37/pen/GozGGx
Skycons 引用链接:https://github.com/darkskyapp/skycons/blob/master/skycons.js
最佳答案
我发现我错在哪里了。我在错误的位置创建了图标。这段代码...
var icons = new Skycons({"color": "#111"}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for(i = list.length; i--; ) {
var weatherType = list[i],
elements = document.getElementsByClassName( weatherType );
console.log(elements);
for (e = elements.length; e--;){
icons.set( elements[e], weatherType );
}
}
icons.play();
...需要放置在 AJAX 调用中。
关于javascript - Skycons/Dark Sky Forecast API,显示动态创建的 DIV 的动画图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35383686/