Question

作为我的第一个使用API的应用，我决定使用Dark Sky API。我试图在我从JS文件中生成的每个预测天数中添加动画Skycons。我已经阅读了有关Skycon问题的StackOverflow上的其他帖子，但我自己没有取得任何进展。

我已经更改了我的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);

指向我的codepen的链接：http://codepen.io/DDD37/pen/GozGGx

指向Skycons的链接：https://github.com/darkskyapp/skycons/blob/master/skycons.js

Answer 1

我找到了我错的地方。我在错误的位置创建了图标。这段代码......

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调用中。

Skycons / Dark Sky Forecast API，显示动态创建的DIV的动画图标

1 个答案: