프로그래밍/자바스크립트

자바스크립트 - 문서객체(DOM)을 사용한 움직임 구현

가카리 2014. 9. 6. 23:07
반응형

문서 객체 모델(DOM, Document Object Model)은 document 객체와 관련된 객체의 집합입니다.


문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가 수정 제거 할 수 있습니다.


다음은 간단히 document 객체를 활용한 회전하는 글자라는 예제입니다.


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script>

        window.onload = function(){

        

        //변수 선언 문서 객체를 가져오기

        //이때 ID 가져온다

        var sun = document.getElementById('sun');

        var earth = document.getElementById('earth');

        var moon = document.getElementById('moon');

        

        //문서 객체의 스타일 속성을 변경합니다

        sun.style.posiion = 'absolute';

        earth.style.position = 'absolute';

        moon.style.position = 'absolute';

        sun.style.left = 250 + 'px';

        sun.style.top = 200 + 'px';

        

        //변수 선언

        var earthAngle = 0;

        var moonAngle = 0;

        

        

        //애니메이션 시작 1초에 30 아래 함수를 실행함

        setInterval(function(){

        

        var earthLeft = 250 + 150 * Math.cos(earthAngle);

        var earthTop = 250 + 150 * Math.sin(earthAngle);

        var moonLeft = earthLeft + 50 * Math.cos(moonAngle);

        var moonTop = earthTop + 50 * Math.sin(moonAngle);

        

        earth.style.left = earthLeft + 'px';

        earth.style.top = earthTop + 'px';

        moon.style.left = moonLeft + 'px';

        moon.style.top = moonTop + 'px';

        

        earthAngle += 0.1;

        moonAngle += 0.3;

        

        

        }, 1000/30);

        

}

</script>


</head>

<body>


        <h1 id="sun">@</h1>

        <h1 id="earth">0</h1>

        <h1 id="moon">*</h1>



</body>

</html>

















실행 화면 @가 태양을 의미하고 0이 지구를 의미하고 *가 달을 의미합니다.


지구와 달이 태양을 주위로 도는 모습을 표현했습니다.

반응형