Question

我正在处理的项目有问题。我正在使用JSON从OpenWeather的API调用数据，并使用Javascript与Skycons结合使用该数据以Skycon的形式输出当前的天气状况。我正在使用一个案例开关来从OpenWeather调用weather icon并将其分配给相应的Skycon。

我的问题是Skycon无法显示。

我的代码：

function startSkycons () {

    var weatherData = "http://api.openweathermap.org/data/2.5/weather?q=Endicott,us&appid=5068bdb59997b9b9f98d00aedf1cc12f";

    $.getJSON(weatherData,function(data){

    var weatherIcon = (data.weather.icon);
    var icons = new Skycons({"color": "white"});
      icons.set("weatherIcon",Skycons.CLEAR_DAY);
      icons.set("weatherIcon", Skycons.CLEAR_NIGHT);
      icons.set("weatherIcon", Skycons.PARTLY_CLOUDY_DAY);
      icons.set("weatherIcon", Skycons.PARTLY_CLOUDY_NIGHT);
      icons.set("weatherIcon", Skycons.CLOUDY);
      icons.set("weatherIcon", Skycons.RAIN);
      icons.set("weatherIcon", Skycons.SLEET);
      icons.set("weatherIcon", Skycons.SNOW);
      icons.set("weatherIcon", Skycons.WIND);
      icons.set("weatherIcon", Skycons.FOG);

    switch (weatherIcon) {
        case "01d":
          skycons.add(document.getElementById("weatherIcon"), Skycons.CLEAR_DAY);
          break;
        case "01n":
          skycons.add(document.getElementById("weatherIcon"), Skycons.CLEAR_NIGHT);
          break;
        case "02d":
          skycons.add(document.getElementById("weatherIcon"), Skycons.PARTLY_CLOUDY_DAY);
          break;
        case "02n":
          skycons.add(document.getElementById("weatherIcon"), Skycons.PARTLY_CLOUDY_NIGHT);
          break;
        case: "03d":
          skycons.add(document.getElementById("weatherIcon"), Skycons.CLOUDY);
          break;
        case: "09d":
          skycons.add(document.getElementById("weatherIcon"), Skycons.RAIN);
          break;
        case: "13d":
          skycons.add(document.getElementById("weatherIcon"), Skycons.SNOW);
          break;
        case: "50d":
          skycons.add(document.getElementById("weatherIcon"), Skycons.FOG);
          break;

        default:

    }


      skycons.play();

}

startSkycons();

body {
        background-color: #000; 
}

#time {
        top: 3%;
        left: 3%;
        position: fixed;
}

#timeModule {
        font-family: 'Oswald', sans-serif;
        color: #FFF;
        font-size: 64px;
}

#date {
        font-family: 'Oswald', sans-serif;
        color: #FFF;
        font-size: 18px;
        top: 15%;
        left: 4%;
        position: fixed;
}

#weather {
      top: 5%;
      left: 70%;
      position: fixed;
      width: 30%;
      height: 250px;
}

#weatherIcon {
      left: 0%;
      position: absolute;
}

.weatherTemp {
      font-family: 'Oswald', sans-serif;
      color: #FFF;
      font-size: 64px;
}


#weatherTemp {
      display: table;
      margin: 0 auto;
}

.weatherTown {
      font-family: 'Oswald', sans-serif;
      color: #FFF;
      font-size: 30px;
}

#weatherTown {
      display: table;
      margin: 0 auto;
      top: -10px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
      <!-- CSS -->
        <link rel="stylesheet" href="css/layout.css" type="text/css">

      <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Oswald:200" rel="stylesheet">

      <!-- JS -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/skycons.js"></script>
        <script src="js/skycons2.js"></script>
        <script src="js/time.js"></script>
        <script src="js/date.js"></script>
        <script src="js/weather.js"></script>

  </head>
  <body>

    <div id="time">
      <div id="timeModule"></div>
    </div>

    <div id="date">
      <div id="dateModule"></div>
    </div>

    <div id="weather">
        <canvas id="weatherIcon"></canvas>

        <span id="weatherTemp" class="weatherTemp"></span>
        <span id="weatherTown" class="weatherTown"></span>
    </div>



  </body>
</html>

Answer 1

在此处检查您的代码

 情况：“ 03d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.CLOUDY）;
      打破;
    案例：“ 09d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.RAIN）;
      打破;
    案例：“ 13d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.SNOW）;
      打破;
    案例：“ 50d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.FOG）;
      打破;

您要在“ case”语法之后在其中添加多余的冒号，而应这样编写

 案例“ 03d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.CLOUDY）;
      打破;
    案例“ 09d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.RAIN）;
      打破;
    案例“ 13d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.SNOW）;
      打破;
    案例“ 50d”：
      skycons.add（document.getElementById（“ weatherIcon”），Skycons.FOG）;
      打破;

尝试一下，随时问更多

Answer 2

感谢Hari Setiawan's和Jaromanda X的帮助，我已经解决了这个问题。

对于可能遇到类似问题的任何人，我的问题是：开关的语法（正如上述两个人所指出的那样）以及我没有定义skycons的事实。我在JS文件中将icons切换为skycons，现在可以正常使用了。

对Javascript文件中的JSON数据使用大小写切换

2 个答案: