물고기 움직이기
버튼을 누르면 물고기가 랜덤한 위치로 움직이되 패널 ( 파랑 바탕 )을 벗어나지 않도록 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> button{ margin: 10px; } .panel{ width: 600px; height: 400px; border: 1px solid #999; position: relative; background-color: blue; margin: 10px; } #fish{ position: absolute; left: 250px; top: 150px; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"> </script> <script type="text/javascript"> window.onload = function(){ var $fish = $("#fish"); // 패널의 넓이, 높이 var panelW = parseInt( $(".panel").css("width") ); var panelH = parseInt( $(".panel").css("height") ); // 물고기의 영역 구하기 panelW = panelW - parseInt( $fish.css("width") ); panelH = panelH - parseInt( $fish.css("height") ); $("#btnStart").click(function(){ var top = parseInt( Math.random() * panelH ); var left = parseInt( Math.random() * panelW ); $fish.css({ top: top, left: left }); }); }; </script> </head> <body> <div> <button id="btnStart"> 클릭하면 물고기가 움직여요.</button> </div> <div class="panel"> <img src="fish1.png" id="fish"/> </div> </body> </html> | cs |
우선 패널이 relative으로 물고기를 absoulte ( position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. )로 설정
물고기가 패널 밖으로 나가면 안되므로 물고기의 활동 범위를 구해주어야 한다. ( 30 ~ 37 줄 )
활동 범위 = 패널의 전체 너비와 높이 - 물고기의 너비와 높이
이때 반드시 parseInt로 정수형을 만들어 줄 것
여기서 가장 중요한 부분은 ⭐ window.onload ⭐부분이다.
왜 $(document).ready 를 사용하지 않았는가? 하면
$(document).ready는 이미지가 로딩되지 않은 시점에 실행 되는 구문으로
이를 사용했을 시 물고기의 너비와 높이가 0으로 되어 정상적인 실행이 되지 않을 것이다.
따라서, 이미지가 완전히 로드되고난 후 실행 되는 window.onload를 사용해 주어야한다.
랜덤하게 스타일 적용하기
1초마다 한번씩 신규 노드를 생성한 후 글자 크기와 색이 랜덤하게 적용해 패널의 자식 노드로 추가
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #panel{ width: 600px; overflow: visible; border: 1px dotted #ccc; font-size: 15px; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"> </script> <script type="text/javascript"> var panel; $(document).ready(function(){ panel = $("#panel"); start(); }); function start() { var num = 1; setInterval(function(){ if( num == 1) { panel.html(""); } var color = "#" + parseInt( Math.random()*0xFFFFFF ).toString(16); var size = parseInt( Math.random()*50 + 10 ); var $span = $("<span> </span>"); panel.append($span); $span.css({ color: color, fontSize: size }); $span.html(num); num++; }, 1000); } </script> </head> <body> <div id="panel"> 여기에 글자 크기와 색이 랜덤하게 설정된 숫자가 동적으로 추가될 거에요. </div> </body> </html> | cs |
https://www.w3schools.com/jsref/met_win_setinterval.asp ( setInterval 설명 )
위 사이트 설명을 보면 알다시피 setInterval 는 창이 닫히기 전까지 계속 실행되는 구문이다.
"#" + parseInt( Math.random()*0xFFFFFF ).toString(16);
처음에는 rgb()를 사용하기 위해 변수 3개를 만들었으나 rgb사용이 되지 않았다...😞
따라서 책에 나와 있는 방법으로 사용 !
그리고 만든 $span을 append로 ( 뒤쪽에 추가 ) 추가해준 뒤 css를 설정해 주었다.
'웹 프로그래밍' 카테고리의 다른 글
| jQuery mouseover vs. mousenter 차이점에 대해 알아보기 😏 (2) | 2018.07.13 |
|---|---|
| jQuery 이벤트에 대해 알아보기 😉 (0) | 2018.07.11 |
| jQuery div태그 동적 로딩 위한 스크롤 마지막 체크하기 (3) | 2018.06.05 |
| JQuery를 공부하기 전 자바스크립트 DOM에 관해 알아보자 ! (3) | 2018.06.04 |
| CSS + JQuery(JavaScript) 응용 2편 (1) | 2018.05.27 |