网站使用 yahoo api 根据当前天气显示 css 动画答案

【问题标题】：Website showing a css animation depending on current weather using yahoo api网站使用 yahoo api 根据当前天气显示 css 动画
【发布时间】：2016-06-08 12:36:23
【问题描述】：

我希望我的网站根据从 yahoo 的天气 api 接收到的天气数据显示 css 动画。到目前为止，为了测试这一点，我创建了一个云在屏幕上飘过的动画，但只希望它们在多云时显示。我有一段我认为应该可以工作的 JS，但我不确定如何基于此实现动画。

我认为我当前的云动画需要进入“body.cloudy、body.mostly-cloudy、body.partly-cloudy{}”，但我不确定如何

下面是我的代码，我已经取出了一些 html（导航功能等）来缩短这个问题的代码。

我的 HTML：

  <body>

  <div class="container-fluid">



      <nav class="navbar navbar-default" style="z-index:2;">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
            <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
            <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
            <li><span class="searchIcon hidden-xs"></span></li>
            </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

    </div> <!-- /container -->

    <div class="sky">
      <div class="cloud cloud01"></div>
      <div class="cloud cloud02"></div>
      <div class="cloud cloud03"></div>
      <div class="cloud cloud04"></div>
      <div class="cloud cloud05"></div>
      <div class="cloud cloud06"></div>
    </div>

    <!-- /info menu -->
    <div class="information-menu">
    <!--menu items-->         
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/my-js.js"></script>
  </body>

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0029'",function(data){
            var w=data.query.results.item;
            var class=w.condition.text;
            var encodedclass = class.replace(/\s+/g, '-').toLowerCase();

            $('body').addClass(encodedclass);

       });

CSS

body{
  overflow: hidden;
  background-color: blue;
} 

.cloud {
  width: 512px;
  height: 512px;
  position: absolute;
}

.cloud01 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift 35s linear infinite;
}

.cloud02 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift02 35s linear infinite;
}

.cloud03 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift02 55s linear infinite;
}

.cloud04 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift 45s linear infinite;
}

.cloud05 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift 30s linear infinite;
}

.cloud06 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift02 25s linear infinite;
}
@keyframes drift {
  from {transform: translate(-150px,-550px);}
  to {transform: translate(350px, 550px);}
}

@keyframes drift02 {
  from {transform: translate(350px,-550px);}
  to {transform: translate(1050px, 550px);}
}

body.cloudy, body.partly-cloudy, body.mostly-cloudy {

}

【问题讨论】：

你试过跑步吗？怎么了？
好吧，我还没有添加代码来说明“在...时显示云动画”，因为我不确定该放在哪里
如果我尝试根据天气简单地更改 bg 颜色，我会收到此控制台错误 'Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not supported outside strict mode'

标签： javascript html css weather-api yahoo-weather-api

【解决方案1】：

作为您评论中的错误消息，您可以尝试在下面编辑您的代码：

var _class=w.condition.text;
var encodedclass = _class.replace(/\s+/g, '-').toLowerCase();

因为在严格模式下，像 ES6 的 let, class 这样的关键字现在完全不支持浏览器，并且您的浏览器会像您阅读的那样欺骗错误。

更新答案：

$('body').removeClass('party-cloud cloud mostly-cloud').addClass(encodedclass);

【讨论】：

谢谢，背景改变了颜色！关于如何根据天气播放动画的任何想法？
使用 setInterval 每隔几分钟检查一次天气变化
我不确定这就是我想要的。所以，目前我有一个css动画（漂移，附加到云类），但我只希望动画在'body.cloudy，body.partly-cloudy，body.mostly-cloudy {}'被激活时播放在 JS 中。我不知道如何将我已经拥有的动画放在那个 css 类中
也许你需要在添加新类之前删除类来改变你的动画。查看更新答案
对不起，让我换个说法。所以此刻云动画播放不管。我想要它，所以如果在 JS 中激活了“body.cloudy”，因为天气数据显示多云，那么动画就会播放，否则动画不应该显示。