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도가 될 때마다 초기화시키는 문장.
'웹개발' 카테고리의 다른 글
| [명품 웹 프로그래밍] 9장 예제 9-14, onload로 이미지 크기 알아내기 (0) | 2021.12.11 |
|---|---|
| [명품 웹 프로그래밍] 8장 실습문제 9, 라면 끓이는 순서 입력받기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 5, 카드 넘기기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 3, 빈 칸 채우기 / 숨기기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] OpenChallenge 5, CSS3로 태그 배치하기 (0) | 2021.10.19 |
