반응형
청기 백기 II
저번에는 내려간 깃발이 다시 올라오지 않았는데, 이번에는 다시 깃발이 올라오도록 써주세요.
그리고 재미를 조금 더하기 위해, 깃발이 1초 뒤에 올라오도록 써줄 텐데요.
setTimeout 함수를 사용하면 동작을 몇 초 후에 실행되도록 설정할 수 있습니다.
// someFunction 함수가 1초 후 실행
setTimeout(someFunction, 1000);
// someFunction 함수가 3.5초 후 실행
setTimeout(someFunction, 3500);
<!DOCTYPE html>
<html>
<head>
<title>청기 백기</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="flags">
<img class="flag blue dot" src="../Ex0108/blue_dot.png" width="100">
<img class="flag red" src="../Ex0108/red_solid.png" width="100">
<img class="flag blue" src="../Ex0108/blue_solid.png" width="100">
<img class="flag blue dot" src="../Ex0108/blue_dot.png" width="100">
<img class="flag white dot" src="../Ex0108/white_dot.png" width="100">
<img class="flag blue" src="../Ex0108/blue_solid.png" width="100">
</div>
<div class="buttons">
<button id="btn1">청기 내려</button>
<button id="btn2">청기 내리지 말고 백기 내려</button>
<button id="btn3">점선 청기 내려</button>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', sans-serif;
text-align: center;
margin: 0;
background: url('../Ex0108/background.jpg') center center/cover no-repeat;
min-width: 768px;
height: 100vh;
}
/* 깃발과 버튼 세로 가운데 정렬*/
body::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container {
display: inline-block;
vertical-align: middle;
}
/* 깃발 */
.flags {
text-align: center;
}
.flags .flag {
margin: 0 10px;
}
.flags .flag.down {
/* 깃발 내렸을 때 30도 회전 */
transform: rotate(30deg);
}
/* 버튼 */
.buttons {
text-align: center;
margin-top: 160px;
}
.buttons button {
width: 222px;
height: 38px;
border-radius: 9px;
border: none;
background-color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
margin: 0 4px;
font-size: 14px;
}$('#btn1').on('click', blueDown);
$('#btn2').on('click', whiteDown);
$('#btn3').on('click', blueDotDown);
function blueDown() {
$('.blue').addClass('down');
setTimeout(reset, 1000);
}
function whiteDown() {
$('.white').addClass('down');
setTimeout(reset, 1000);
}
function blueDotDown() {
$('.blue.dot').addClass('down');
setTimeout(reset, 1000);
}
function reset() {
$('.flag').removeClass('down');
}본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 활용하기] 03. jQuery 2 (0) | 2021.02.21 |
|---|---|
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |