时间戳

首页 > 解决方案 > 在 Javascript 文件中使用带有 JSON 数据的大小写切换

javascript - 在 Javascript 文件中使用带有 JSON 数据的大小写切换

问题描述

我正在处理的项目有问题。我使用 JSON 从 OpenWeather 的 API 调用数据，并使用 Javascript 结合 Skycons 使用该数据以Skycon的形式输出当前天气状况。我正在使用 case switch 来获取从 OpenWeather 调用的天气图标并将其分配给相应的 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>

标签： javascripthtmljson

解决方案

在此处检查您的代码

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;

你在“case”语法之后添加了额外的冒号，而不是你应该这样写

    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;

试试看，随时问更多

推荐阅读