Toggle navigation
Toggle navigation
This project
Loading...
Sign in
강희주
/
Music_Recommendation_Website
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
강희주
2022-06-09 10:54:18 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
b6768d790fa8f3216cea0167c12664f74b6707a7
b6768d79
1 parent
242e518e
Update main.html
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
48 additions
and
4 deletions
main_/main.html
main_/main.html
View file @
b6768d7
...
...
@@ -4,6 +4,45 @@
<script
src=
"main.js"
>
</script>
<meta
charset=
"UTF-8"
>
<title>
날씨에 따른 음악 추천 사이트
</title>
<script
src=
"http://code.jquery.com/jquery-1.11.0.js"
></script>
<script>
// 콜백 함수를 이용할 시 반드시 이 스크립트가 밑의 스크립트보다 먼저 실행돼야 함
function
useGps
()
{
var
userLat
=
document
.
getElementById
(
'latitude'
).
innerText
.
trim
();
// trim으로 공백을 제거하고 실제 값만 불러오기
console
.
log
(
userLat
);
var
userLng
=
document
.
getElementById
(
'longitude'
).
innerText
.
trim
();
// trim으로 공백을 제거하고 실제 값만 불러오기
console
.
log
(
userLng
);
const
APIKEY
=
"ea903679a6e5a44da75a971c0231f4f4"
;
fetch
(
"https://api.openweathermap.org/data/2.5/weather?lat="
+
userLat
+
"&lon="
+
userLng
+
"&appid="
+
APIKEY
+
"&units=metric"
)
.
then
(
res
=>
res
.
json
())
.
then
(
function
(
jsonObject
)
{
//if(!error&&response.statusCode==200)
//request는 string으로 받아오기 때문에 JSON형태로 바꿔준다.
//var jsonObject = JSON.parse();
var
LocationName
=
jsonObject
.
name
;
//지역 이름
var
WeatherCondition
=
jsonObject
.
weather
[
0
].
main
;
//현재 날씨
var
Temp
=
jsonObject
.
main
.
temp
;
//현재 기온
//console.log(body);
console
.
log
(
LocationName
);
console
.
log
(
WeatherCondition
);
console
.
log
(
Temp
);
})
}
</script>
<script>
$
(
function
()
{
if
(
navigator
.
geolocation
)
{
navigator
.
geolocation
.
getCurrentPosition
(
function
(
pos
)
{
$
(
'#latitude'
).
html
(
pos
.
coords
.
latitude
);
$
(
'#longitude'
).
html
(
pos
.
coords
.
longitude
);
// useGps(); // GPS 정보를 모두받아온 뒤에 코드를 실행함
useGps
();
});
}
else
{
alert
(
'이 브라우저에서는 안됩니다'
);
}
});
</script>
<style>
#container
{
width
:
600px
;
...
...
@@ -51,12 +90,17 @@
<fieldset>
<legend>
현재 내 위치 정보
</legend>
<div><input
type=
"button"
value=
"현재 내 위치 검색"
></div><br>
<!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 -->
<li>
위도:
<span
id=
"latitude"
></span></li>
<li>
경도:
<span
id=
"longitude"
></span></li>
<li>
위치:
<span
id=
"LocationName"
></span></li>
<li>
날씨:
<span
id=
"WeatherCondition"
></span></li>
<li>
기온:
<span
id=
"Temp"
></span></li>
</fieldset>
<fieldset>
<legend>
추천 음악 정보
</legend>
<div><input
type=
"button"
value=
"음악 추천 받기"
></div><br>
<iframe
id=
"video1"
width=
"450"
height=
"280"
src=
""
frameborder=
"0"
allowtransparency=
"true"
allowfullscreen
></iframe>
<
!-- <
iframe id="video1" width="450" height="280" src="" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play button</a>
<script>
var userLat = 37;
...
...
@@ -69,14 +113,14 @@
});
})
</script>
</script>
-->
<
!-- <
h4>추천 음악 1</h4>
<h4>
추천 음악 1
</h4>
<iframe
width=
"942"
height=
"530"
src=
"https://www.youtube.com/embed/vnS_jn2uibs"
title=
"YouTube video player"
frameborder=
"0"
allow=
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe><br>
<h4>
추천 음악 2
</h4>
<iframe
width=
"942"
height=
"530"
src=
"https://www.youtube.com/embed/P6gV_t70KAk"
title=
"YouTube video player"
frameborder=
"0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
-->
allow=
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe><br>
</fieldset>
...
...
Please
register
or
login
to post a comment