마우스 클릭 연습
1. 10x10의 셀을 가진 표에서 랜덤하게 선택한 셀에 글자를 출력한다.
2. 글자를 클릭하면 다른 셀을 랜덤하게 선택하여 이미지를 출력한다.
built by HTML, CSS, Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border : 1px solid violet;
border-collapse: collapse;
display : inline-block;
}
td{
border : 1px solid violet;
width : 40px;
height : 40px;
display : inline-block;
}
</style>
</head>
<body onload = "randomBerry()">
<h1>마우스 클릭 연습</h1>
<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>
<script>
let images = document.getElementsByTagName("td");
function randomBerry(){
for(let i =0;i<images.length;i++){
images[i].innerHTML = "";
}
let i = Math.floor(Math.random()*100);
images[i].innerHTML = "hello";
images[i].onclick = randomBerry;
}
</script>
</body>
</html>'CS Study > Projects' 카테고리의 다른 글
| Project 8 : 그림판 구현 (0) | 2022.04.08 |
|---|---|
| Project 7 : 상하좌우 키로 셀 이동하기 (0) | 2022.04.08 |
| Project5 : Gambling game (0) | 2022.04.08 |
| Project 4 : Bill Calculator (0) | 2022.04.06 |
| Project 3 : 뿌요뿌요 게임 (0) | 2022.04.06 |