지금까지 배운 내용을 활용해서 이미지를 자동으로 움직이게 만들어보자. 초기작업을 위해 Body영역을 먼저 간단히 입력했다. 버튼을 총 3개를 만들어 수동, 자동, 자동 멈춤의 값을 주었고 현재 이미지의 x좌표 값을 나타내는 텍스트박스를 하나 추가했다.
<body onLoad="init()">
<input type="button" value="수동" onClick="manual()">
<input id="autoBt" type="button" value="자동" onClick="moveAuto()">
<input type="button" value="자동멈춤" onClick="autoStop()">
<input type id="txt" type="text">
<img id="cat" src="./cat.png" style="position:absolute; top:50px; left:10px;">
</body>
추가할 기능은 간단하다.
1. 수동 버튼을 한 번 누르면 고양이 이미지가 x축으로 10씩 이동하고 x좌표가 300이 넘을 경우 다시 10씩 되돌아온다.
2. 자동 버튼을 누르면 고양이 이미지가 자기 혼자 계속 왔다 갔다 하는 효과를 준다. 자동 버튼을 반복해서 누르면 속도가 빨라지니 한 번 눌렀을 때 버튼 효과를 사라지게 만든다.
3. 자동 멈춤 버튼을 누르면 혼자 왔다 갔다 하던 고양이 이미지를 멈춘다.
이제 자바스크립트 영역을 입력하자. 필요한 변수는 미리 선언하고 초기값 세팅을 위해 init 함수를 만들어 미리 준비를 한다. 제어할 대상은 ID를 부여하고 getElementById로 불러온다.
<script>
var x=10;
var step=10;
var st;
var autoBt;
var txt;
var cat;
function init(){
autoBt=document.getElementById("autoBt");
txt=document.getElementById("txt");
cat=document.getElementById("cat");
}
</script>
1번 수동 버튼을 한 번 누를 때마다 고양이가 10씩 이동하도록 만들자. X에 step을 의미하는 10을 계속 더한다는 식을 주고, 삼항연산자를 활용해서 300이 넘을 경우 -10으로 바뀌어 다시 돌아오도록 만들었다. X좌표가 10보다 작아질 경우 -10인 step은 다시 10으로 변경된다.
변경되는 x 값으로 cat 이미지를 움직이고 txt 상자에 현재 위치를 반영한다.
function manual(){
x+=step;
step=(x>=300 || x<=10)? -step:step;
cat.style.left=x + "px";
txt.value=x;
}
2번 버튼을 누르면 고양이 이미지가 자동으로 움직이게 만들자. 함수를 하나 만들어서 50이라는 텀으로 자동으로 움직이게 만들었다. 여기서 숫자는 1000이 1초를 의미한다. Disabled를 사용했는데 한 번 클릭하고 나면 해당 버튼이 비활성화 되도록 만든다.
function moveAuto(){
st=setInterval("manual()",50);
autoBt.disabled=true;
}
이제 고양이 이미지를 원하는 때에 멈추기만 하면 된다. clearTimeout()으로 자동으로 움직이는 고양이를 멈춘다. 지속성을 위해 disabled를 다시 한 번 사용하는데 효과는 아래 사진과 같이 비활성화 시켰던 자동 버튼을 자동 멈춤 버튼을 눌렀을 때 다시 활성화 시킨다.
function autoStop(){
clearTimeout(st);
autoBt.disabled=false;
}
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| 자바스크립트 prompt로 구구단 출력하기 (0) | 2016.07.30 |
|---|---|
| 자바스크립트(javaScript) getElementById, createElement, appendChild (2) | 2016.05.17 |
| [문돌이의IT] 자바스크립트 연산자를 활용해서 윤년 여부를 판단해보자 (0) | 2016.02.05 |
| [문돌이의IT] 자바스크립트 switch문을 확실하게 익혀보자 (0) | 2016.02.03 |
| [문돌이의IT] 자바스크립트 for문을 심도있게 이해해보자 (0) | 2016.02.02 |