Fatal编程技术网
  • javascript/
  • Javascript 使用OpenWeatherMapAPI进行温度转换

Javascript 使用OpenWeatherMapAPI进行温度转换

javascript jquery html json

Javascript 使用OpenWeatherMapAPI进行温度转换,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我正在用OpenWeatherMapAPI构建一个天气应用程序。该应用程序已经工作，但我的温度转换器仍然无法工作的问题 <div class='valign col s6 text-style'> <div id="iconTemp"> <div id="icon"></div> <div id="temp"></div> </div>

我正在用OpenWeatherMapAPI构建一个天气应用程序。该应用程序已经工作，但我的温度转换器仍然无法工作的问题

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
这是我的HTML：

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
还有我的javascript：

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>

 <script type="text/javascript">
      function ToC() {
        var strIn = parseInt(temperature);

        if(isNaN(strIn)) {
          alert("Not a Number");
        } else {
          var f = parseFloat(strIn);
          var c = (f - 32) * 5/9;

          var r = Math.round(c * 100)/100;
          parseInt(temperature) = r.toString();   
        }
    }

    function ToF() {
        var strIn = parseFloat((temperature).toFixed(1));

        if(isNaN(strIn)) {
          alert("Not a Number");
        } else {
          var c = parseFloat(strIn);
          var f = (c * 9/5) + 32;

          var r = Math.round(f * 100)/100;
          parseFloat((temperature).toFixed(1)) = r.toString();   
        }
    }

$(document).ready(function() {

    getLocationData();

    function getLocationData() {
      $.get("http://ipinfo.io", function(location) {
        console.log(location);

        $('.location')
          .append(location.city + ", ")
          .append(location.region);

        var units = getUnits(location.country);
        getWeatherData(location.loc, units);

      }, "jsonp");

    }

    function getWeatherData(loc, units) {
      lat = loc.split(",")[0]
      lon = loc.split(",")[1]

      var appid = "&APPID=123456abcde"

      var url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + "&units=" + units + appid;

      console.log(url);

      $.get(url, function(weather) {
        var windDir = WindDirection(weather.wind.deg);
        var temperature = weather.main.temp;
        var unitLabel;

        if (units === "imperial") {
          unitLabel = "<a href='#'>F</a>/<a href='#' onclick='ToC()'>C</a>";
          // temperature = parseFloat((temperature).toFixed(1));
        } else {
          unitLabel = "<a href='#' onclick='ToF()'>C</a>";
          // temperature = parseInt(temperature);
        }

        // temperature;

        // temperature = parseInt(temperature);
        // temperature = parseFloat((temperature).toFixed(1));



        console.log(weather);

        $('#icon')
          // .append("<img src='http://openweathermap.org/img/w/" + weather.weather[0].icon + ".png'>");
          .append("<i class='wi wi-owm-"+weather.weather[0].id+"'></i>");
                   // <i class="wi wi-owm-200"></i>

        $('#temp').append(temperature + "&deg; " + unitLabel);
        $('#conditions').append(weather.weather[0].description);
        $('#wind').append(windDir + " " + weather.wind.speed + " knots");

      }, "jsonp");

    };



    function WindDirection(dir) {
      var rose = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
      var eightPoint = Math.floor(dir / 45);
      return rose[eightPoint];
    }

    function getUnits(country) {
      var imperialCountries = ['US', 'ID', 'SG', 'MY', 'BS', 'BZ', 'KY', 'PW'];

      if (imperialCountries.indexOf(country) === -1) {
        var units = 'metric';
      } else {
        units = 'imperial';
      }

      console.log(country, units);
      return units;
    }

  });
</script>


函数ToC（）{
var strIn=parseInt（温度）；
如果（伊斯南（斯特林））{
警报（“不是数字”）；
}否则{
var f=浮动（strIn）；
var c=（f-32）*5/9；
var r=数学四舍五入（c*100）/100；
parseInt（温度）=r.toString（）；
}
}
函数ToF（）{
var strIn=parseFloat（（温度）.toFixed（1））；
如果（伊斯南（斯特林））{
警报（“不是数字”）；
}否则{
var c=浮点数（strIn）；
变量f=（c*9/5）+32；
var r=数学四舍五入（f*100）/100；
parseFloat（（温度）.toFixed（1））=r.toString（）；
}
}
$（文档）.ready（函数（）{
getLocationData（）；
函数getLocationData（）{
$.get（”http://ipinfo.io，功能（位置）{
控制台日志（位置）；
$（“.location”）
.append（location.city+“，”）
.append（位置、区域）；
var单位=getUnits（地点、国家）；
getWeatherData（location.loc，单位）；
}“jsonp”）；
}
功能getWeatherData（loc，单位）{
横向=位置拆分（“，”[0]
lon=位置拆分（“，”[1]
var appid=“&appid=123456abcode”
var url='1〕http://api.openweathermap.org/data/2.5/weather?lat=“+lat+”&lon=“+lon+”&units=“+units+appid；
console.log（url）；
$.get（url、函数（天气）{
var windDir=风向（天气、风速、度）；
var温度=天气主温度；
var单位标签；
如果（单位=“英制”）{
unitLabel=“/”；
//温度=parseFloat（（温度）.toFixed（1））；
}否则{
unitLabel=“”；
//温度=parseInt（温度）；
}
//温度；
//温度=parseInt（温度）；
//温度=parseFloat（（温度）.toFixed（1））；
控制台.日志（天气）；
$（“#图标”）
//.附加（“”）；
.附加（“”）；
// 
$（'#temp'）。附加（温度+“°；”+单位标签）；
$（“#条件”）.append（weather.weather[0].description）；
$（“#风”）.append（windDir+”+weather.wind.speed+“节”）；
}“jsonp”）；
};
功能风向（dir）{
var rose=['N'、'NE'、'E'、'SE'、'S'、'SW'、'W'、'NW']；
变量八点=数学楼层（dir/45）；
返回玫瑰[八点]；
}
职能单位（国家）{
var imperialCountries=['US'，'ID'，'SG'，'MY'，'BS'，'BZ'，'KY'，'PW']；
if（帝国国家索引）（国家）=-1）{
var单位=‘公制’；
}否则{
单位=‘英制’；
}
控制台日志（国家、单位）；
返回单元；
}
});
应用程序pict：

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>


   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
我创建了函数ToC（convert F to C）和ToF（convert C to F），当我单击标签时，我得到一条错误消息“uncaughtreferenceerror:ToC未定义”。我想应用程序的温度值将改变时，我点击C（摄氏度）和F（华氏度）

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
非常感谢您的帮助。

这是一个范围问题
   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>

var-temperature
正在定义内部匿名函数内部$。获取内部获取天气数据内部另一个匿名函数内部$（文档）。就绪（）
这比你用ToF或ToC读得更深6级

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
简单来说：您可以访问此范围或父范围中声明的所有变量

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
关于JavasScript范围有一个很好的解释

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
解决：
  • 全局变量：

       <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
  • 添加一个全局变量
    var-temperature=0右下
  • 从
    var-temperature
    内部
    $中删除
    var
    。get（url，function（））
  • 要使用
    onclick（）
  • 更改功能的范围：

       <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
  • 将
    ToC
    和
    ToF
    函数声明放在
    $.get（url，function（）{[HERE]}）中范围
  • 删除
    onclick='ToC（）'
    ，它将不再工作。（与飞行时间相同）
  • 在
    中添加一个id，例如：
    id=“toggle unit btn”
    （与ToF相同）
  • 在（'click'，ToC'）上添加一个click事件处理程序
    $（'#toggle unit btn'）

    在
    $.get（url，function（）{[HERE]}）中范围
  • 通过函数传递和返回值：[推荐]

       <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>
  • 将输入和输出参数添加到
    ToC
    和
    ToF

函数ToC（temp）{//输入
var strIn=parseInt（温度）；
//请注意，我更改了所有温度实例
//到参数temp[可以有任何名称]的实例
如果（伊斯南（斯特林））{
警报（“不是数字”）；
}否则{
var f=浮动（strIn）；
var c=（f-32）*5/9；
var r=数学四舍五入（c*100）/100；
temp=parseInt（r.toString（））；//为任何解决方案修复此行！
}
返回温度；//输出
}
  • 删除
    onclick='ToC（）'
    ，它将不再工作。（与飞行时间相同）
  • 在
    中添加一个id，例如：
    id=“toggle unit btn”
    （与ToF相同）
  • 在（'click'，function（）{temperature=ToC（temperature）；}）上添加一个click事件处理程序
    $（'toggle unit btn'）

    在
    $.get（url，function（）{[HERE]}）中范围
    （注意它与以前的解决方案不同，因为它需要传递和接收温度）
    • <