Javascript
JavaScript<마우스 클릭 연습>
mickey7
2023. 2. 22. 17:41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>마우스 클릭 연습</title>
<style>
table {
border : 1px solid blue;
border-collapse : collapse;
}
td {
border : 1px solid blue;
width : 50px;
height : 50px;
padding : 0px;
}
</style>
<script>
let img = new Image();
img.src="media/donkey.png"; // donkey.png는 45x45 크기. 미리 로딩
function set() {
let randomNum = Math.floor(Math.random()*100);
document.images[randomNum].src = img.src;
document.images[randomNum].addEventListener("click",
function(){
document.images[randomNum].src = "";
set();
})
}
</script>
</head>
<body onload="set()">
<h3>마우스 클릭 연습</h3>
<hr>
<table>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
<tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td>
<td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
</table>
</body>
</html>


1.아래와 같이 이미지 객체 배열로 사진 이미지 저장해두고
let img = new Image();
img.src="media/donkey.png"
2.document.images[]
문서에 있는 모든 이미지를 담고 있다고 해서 활용하니 코드가 훨씬 더 짧아졌다.
3.아래 테이블 표 만드는 것은 일일이 하지 않고 element 생성해서 할 수 있다고 하는데 다음에 한 번 시도해볼 생각