사랑스러운 웹페이지에 날씨를 띄워 보게씁니다.

 

 

 

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html>
<meta charset="utf-8" />
 
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 

 

integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"  

 

crossorigin="anonymous">

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="main.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
</head>
 
<!-- 날씨~~~~ -->
                <h2> 지역: <section id="city"></section></h2>
                <h2> 현재 온도: <section id="temperature-celcius"></section></h2>               
                 <h2>습도: <section id='humidity'></section></h2>
                  <h2>전체: <section id='overall'></section></h2>
<!--  -->
 
</html>
 cs

 

 

 

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.getJSON('http://ip-api.com/json', function(data){
var lat = data.lat;
var lon = data.lon;
var units = "metric";
 
$("#city").html(data.city + ", " + data.country)
console.log(data);
//Open weather API request
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon='
+ lon + '&units=' + units + '&APPID=e95d958a11128b11ad3eb0fa101dae38', function(json){
console.log(json);
$("#temperature-celcius").html(json.main.temp + ' C&deg');
$("#temperature-farenheit").html((json.main.temp * 1,8 + 32) + ' F&deg');
$("#humidity").html(json.main.humidity + ' %');
$("#overall").html(json.weather[0].main);
$("#icon").html('<img src="http://openweathermap.org/img/w/' + json.weather[0].icon + '.png"</img>');
});
});
 cs

 

 

 

weather.zip

 

저작자표시 비영리

'똥 싸기 > HTML' 카테고리의 다른 글

[html]실시간 시간정보 띄우기  (0) 2017.08.08
[html]한글 깨짐  (2) 2017.08.08
[html]이미지 화면가득 채우기  (0) 2017.08.08

+ Recent posts

티스토리툴바