웹개발
[명품 웹 프로그래밍] 8장 실습문제 7, 클릭할 때마다 그림 회전
hatch
2021. 12. 11. 03:01
728x90
반응형
실행 화면
| 초기 화면 | 2번 클릭 화면 |
 |
|
<자바 스크립트 코드>
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title></head>
<body>
<h3>클릭하면 90도 회전</h3>
<hr>
<div>
<img src="media/spongebob.png" width="100" height="100" onclick="rotate(this)">
</div>
<script>
var n = 90;
function rotate(obj) {
obj.style.transform = "rotate("+ n + "deg)";
n += 90;
n %= 360;
}
</script></body></html>
1. 복습
- 여기서 n += 90 은 90 - 180 - 270 .. 90도씩 추가하여 한 바퀴 돌리게 함.
이렇게만 해도 화면상으로는 큰 문제 없음.
그러나 계속 클릭하면 내부적으로 100바퀴 이상 돌리는 결과 초래할 수 있음.
- n %= 360 의미?
위의 결과를 막기 위해 360도가 될 때마다 초기화시키는 문장.