setTimeout () 메소드는 지정된 밀리 초 후에 함수를 호출하거나 표현식을 평가합니다.
팁 : 1000ms = 1 초
팁 : 이 기능은 한 번만 실행됩니다. 실행을 반복해야하는 경우 setInterval () 메소드를 사용하십시오 .
팁 : 함수가 실행되지 않도록 clearTimeout () 메소드를 사용하십시오 .
<!DOCTYPE html>
<html>
<head>
<title>청기 백기</title>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', sans-serif;
text-align: center;
margin: 0;
background: url('img/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(50deg);
}
/* 버튼 */
.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;
}
</style>
<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="img/blue_dot.png" width="100">
<img class="flag red" src="img/red_solid.png" width="100">
<img class="flag blue" src="img/blue_solid.png" width="100">
<img class="flag blue dot" src="img/blue_dot.png" width="100">
<img class="flag white dot" src="img/white_dot.png" width="100">
<img class="flag blue" src="img/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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn1').click(function(){
$('.blue').addClass('down');
setTimeout(reset,1000);
});
$('#btn2').click(function(){
});
$('#btn3').click(function(){
});
function reset(){
$('.blue').removeClass('down');
};
</script>
</body>
</html><script>
$('#btn1').click(function(){
$('.blue').addClass('down');
setTimeout(reset,1000);
});
$('#btn2').click(function(){
});
$('#btn3').click(function(){
});
function reset(){
$('.blue').removeClass('down');
};
</script>'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| 보여줬다 지웠다 addClass,removeClass / slideToggle (0) | 2019.10.11 |
|---|---|
| addClass, removeClass / setInterval / setTimeout이란? (0) | 2019.10.11 |
| 움직이는 막대바 만들기(progress bar) ex.2_setInterval (0) | 2019.10.11 |
| 움직이는 막대바 만들기(progress bar) ex.1 (0) | 2019.10.11 |
| 스크롤 이벤트와 마우스휠이벤트로 풀페이지 만들기 (0) | 2019.10.10 |