자바스크립트에서 날씨에따라 배경과 이미지변경
본문
안녕하세요 js랑 html 공부중인 학생입니다.
자바스크립트에서 날씨에따라 웹 배경과 날씨이미지를 변경하고 싶은데 너무 어렵습니다....
날씨 api 같은경우에는 http://ip-api.com/json 여기에서 받아와서
<!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>
<body>
<!-- 날씨~~~~ -->
<h2> 현재 온도: <section id="temperature-celcius"></section></h2>
<h2>습도: <section id='humidity'></section></h2>
<h2>전체: <section id='overall'></section></h2>
<!-- -->
</body>
</html>
이렇게 까지 제작을 했는데 배경이랑 날씨 이미지 변경하는 방법이 있을까요?ㅠㅠ
답변 2
json으로 받은값으로 jquery나 스크립트로 변경해주시면됩니다
변수에 api로 받아온 날씨에 대한 정보를 추출해 담고, 스크립트에 해당 변수로 작동하는 if문을 작성하면 될 것 같네요.
css를 이용하시려면 if문에 의한 특정 클래스를 추가해주셔도 되고, 영역 내용에 이미지 자체를 넣어주는 방법도 가능할 듯합니다.