티스토리 뷰
puzzle Lv1
puzzle Lv2
<!DOCTYPE html>
<html lang="ko">
<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>puzzle</title>
<style>
* {
padding: 0;
margin: 0;
}
#all {
width: 600px;
height: 600px;
margin: 0 auto;
background-color: #62db72;
}
#col1,
#col2,
#col3 {
height: 200px;
}
#c1r1,
#c1r2,
#c1r3,
#c2r1,
#c2r2,
#c2r3,
#c3r1,
#c3r2,
#c3r3 {
width: 200px;
height: 200px;
float: left;
}
.active {
background-color: rgb(77, 42, 134);
}
.btn {
margin: 50px;
}
.btn a {
border: 1px solid #000;
border-radius: 50px;
padding: 10px;
text-decoration: none;
color: #000;
font-size: 30px;
}
.btn a:hover {
border: 1px solid #62db72;
background-color: #62db72;
color: #fff;
}
</style>
</head>
<body>
<h3>puzzle Lv1</h3>
<div id="puLv1">
<div class="btn"><a href="#puLv1">리셋</a></div>
<div id="all">
<div id="col1">
<div id="c1r1"></div>
<div id="c1r2"></div>
<div id="c1r3"></div>
</div>
<div id="col2">
<div id="c2r1"></div>
<div id="c2r2"></div>
<div id="c2r3"></div>
</div>
<div id="col3">
<div id="c3r1"></div>
<div id="c3r2"></div>
<div id="c3r3"></div>
</div>
</div>
</div>
<h3>puzzle Lv2</h3>
<div id="puLv2">
<div class="btn"><a href="#puLv2">리셋</a></div>
<div id="all">
<div id="col1">
<div id="c1r1"></div>
<div id="c1r2"></div>
<div id="c1r3"></div>
</div>
<div id="col2">
<div id="c2r1"></div>
<div id="c2r2"></div>
<div id="c2r3"></div>
</div>
<div id="col3">
<div id="c3r1"></div>
<div id="c3r2"></div>
<div id="c3r3"></div>
</div>
</div>
</div>
<script>
// puzzle Lv1
{
//리셋
document.querySelector("#puLv1 .btn").addEventListener("click", function(){
document.querySelectorAll("#puLv1 #col1 > div").forEach(function(el){
el.classList.remove("active")
})
document.querySelectorAll("#puLv1 #col2 > div").forEach(function(el){
el.classList.remove("active")
})
document.querySelectorAll("#puLv1 #col3 > div").forEach(function(el){
el.classList.remove("active")
})
})
document.querySelectorAll("#puLv1 #col1 > div").forEach(function(el){
el.addEventListener("click", function(){
el.classList.toggle("active");
})
});
document.querySelectorAll("#puLv1 #col2 > div").forEach(function(el){
el.addEventListener("click", function(){
el.classList.toggle("active");
})
});
document.querySelectorAll("#puLv1 #col3 > div").forEach(function(el){
el.addEventListener("click", function(){
el.classList.toggle("active");
})
});
}
// puzzle Lv2
{
//리셋
document.querySelector("#puLv2 .btn").addEventListener("click", function(){
document.querySelectorAll("#puLv2 #col1 > div").forEach(function(el){
el.classList.remove("active")
})
document.querySelectorAll("#puLv2 #col2 > div").forEach(function(el){
el.classList.remove("active")
})
document.querySelectorAll("#puLv2 #col3 > div").forEach(function(el){
el.classList.remove("active")
})
})
document.querySelector("#puLv2 #c1r1").addEventListener("click", function(){
document.querySelector("#puLv2 #c1r1").classList.toggle("active");
document.querySelector("#puLv2 #c1r2").classList.toggle("active");
document.querySelector("#puLv2 #c2r1").classList.toggle("active");
});
document.querySelector("#puLv2 #c1r2").addEventListener("click", function(){
document.querySelector("#puLv2 #c1r2").classList.toggle("active");
document.querySelector("#puLv2 #c1r3").classList.toggle("active");
document.querySelector("#puLv2 #c2r2").classList.toggle("active");
document.querySelector("#puLv2 #c1r1").classList.toggle("active");
});
document.querySelector("#puLv2 #c1r3").addEventListener("click", function(){
document.querySelector("#puLv2 #c1r3").classList.toggle("active");
document.querySelector("#puLv2 #c2r3").classList.toggle("active");
document.querySelector("#puLv2 #c1r2").classList.toggle("active");
});
document.querySelector("#puLv2 #c2r1").addEventListener("click", function(){
document.querySelector("#puLv2 #c2r1").classList.toggle("active");
document.querySelector("#puLv2 #c1r1").classList.toggle("active");
document.querySelector("#puLv2 #c2r2").classList.toggle("active");
document.querySelector("#puLv2 #c3r1").classList.toggle("active");
});
document.querySelector("#puLv2 #c2r2").addEventListener("click", function(){
document.querySelector("#puLv2 #c2r2").classList.toggle("active");
document.querySelector("#puLv2 #c1r2").classList.toggle("active");
document.querySelector("#puLv2 #c2r3").classList.toggle("active");
document.querySelector("#puLv2 #c3r2").classList.toggle("active");
document.querySelector("#puLv2 #c2r1").classList.toggle("active");
});
document.querySelector("#puLv2 #c2r3").addEventListener("click", function(){
document.querySelector("#puLv2 #c2r3").classList.toggle("active");
document.querySelector("#puLv2 #c1r3").classList.toggle("active");
document.querySelector("#puLv2 #c3r3").classList.toggle("active");
document.querySelector("#puLv2 #c2r2").classList.toggle("active");
});
document.querySelector("#puLv2 #c3r1").addEventListener("click", function(){
document.querySelector("#puLv2 #c3r1").classList.toggle("active");
document.querySelector("#puLv2 #c2r1").classList.toggle("active");
document.querySelector("#puLv2 #c3r2").classList.toggle("active");
});
document.querySelector("#puLv2 #c3r2").addEventListener("click", function(){
document.querySelector("#puLv2 #c3r2").classList.toggle("active");
document.querySelector("#puLv2 #c2r2").classList.toggle("active");
document.querySelector("#puLv2 #c3r3").classList.toggle("active");
document.querySelector("#puLv2 #c3r1").classList.toggle("active");
});
document.querySelector("#puLv2 #c3r3").addEventListener("click", function(){
document.querySelector("#puLv2 #c3r3").classList.toggle("active");
document.querySelector("#puLv2 #c2r3").classList.toggle("active");
document.querySelector("#puLv2 #c3r2").classList.toggle("active");
});
}
</script>
</body>
</html>'Javascript > 연습, 실습' 카테고리의 다른 글
| 타자 연습 (0) | 2022.04.14 |
|---|---|
| 뮤직 플레이 (0) | 2022.04.14 |
| 카드 뒤집기 (0) | 2022.04.14 |
| js로 css 제어하기 (0) | 2022.02.11 |
UP NEXT : Javascript/연습, 실습
댓글
© 2018 webstoryboy