Javascript 使用yahoo api根据当前天气显示css动画的网站_Javascript_Html_Css_Weather Api_Yahoo Weather Api

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

javascript html css

Javascript 使用yahoo api根据当前天气显示css动画的网站,javascript,html,css,weather-api,yahoo-weather-api,Javascript,Html,Css,Weather Api,Yahoo Weather Api,我希望我的网站显示css动画，这取决于它从雅虎的天气api接收到的天气数据。到目前为止，为了测试这一点，我已经创建了一个云在屏幕上漂移的动画，但只希望它们在多云时显示。我有一个JS我相信应该可以工作，但我不知道如何实现基于此的动画我认为我当前的云动画需要进入“body.cloudy，body.mostroy-cloudy，body.party-cloudy{}”，但我不确定怎么做下面是我的代码，我去掉了一些html（nav特性等）来缩短这个问题的代码我的HTML： <body&g

我希望我的网站显示css动画，这取决于它从雅虎的天气api接收到的天气数据。到目前为止，为了测试这一点，我已经创建了一个云在屏幕上漂移的动画，但只希望它们在多云时显示。我有一个JS我相信应该可以工作，但我不知道如何实现基于此的动画

我认为我当前的云动画需要进入“body.cloudy，body.mostroy-cloudy，body.party-cloudy{}”，但我不确定怎么做

下面是我的代码，我去掉了一些html（nav特性等）来缩短这个问题的代码

我的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>

CSS

在评论中添加错误信息时，您可以尝试编辑以下代码：

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

因为在严格模式下，ES6的某些关键字（如

let，class

）现在完全不受浏览器支持，并且您的浏览器会像您读到的一样欺骗错误

更新答案：

$（'body'）.removeClass（'party-cloud-cloud-mary-cloud'）.addClass（encodedclass）你试过跑步吗？怎么了？我没有添加代码说“在……时显示云动画”，因为我不确定该放在哪里如果我尝试根据天气简单地更改背景颜色，我会遇到控制台错误“Uncaught SyntaxError:Block scoped declarations（let、const、function、class）在严格模式外还不受支持”谢谢，这使得背景改变了颜色！关于如何根据天气播放动画有什么想法吗？使用setInterval每隔几分钟检查一次天气变化我不确定这是我想要的。因此，目前我有一个css动画（漂移，附加到云类），但我只希望在JS中激活“body.cloudy，body.partial-cloudy，body.mostriy-cloudy{}”时播放动画。我不知道如何把动画我已经在css类可能你需要删除类之前添加新的类来更改你的动画。请参阅更新答案对不起，让我重新措辞。因此，目前，云动画将不受影响地播放。我希望如此，如果在JS中激活了“body.cloudy”，因为天气数据显示天气是阴天，那么动画将播放，否则动画将不显示。
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 {

}

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