timeout
- 일정 시간 후에 동작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function time() {
alert("3초 뒤에 실행됩니다");
}
window.setTimeout(time,3000);
//만약 time함수에 매개변수를 주고 싶다면?
</script>
</body>
</html>
time함수에 매개변수 주기
function time(text){
return function() {
alert(text);
}
}
window.setTimeout(time("3초 뒤에 실행됩니다"),3000);
clearTimeout
--timeout 함수를 제거한다.
function time(text){
return function() {
alert(text);
}
}
var timeID = window.setTimeout(time("3초 뒤에 실행됩니다"),3000);
clearTimeout(timeID); //3초뒤에 실행되지 않는다.
애니메이션 효과 넣기
<style>
.box {
width:700px;
margin: 0 auto;
}
.title-left {
position: relative;
animation: myLeft 1s ease-in-out;}
.title-right {
position:relative;
animation: myRight 1s ease-in-out;}
@keyframes myLeft {
from {left: -100px;}
to{ left :0;}
}
@keyframes myRight {
from {right : -100px;}
to {right:0;}
}
</style>
<div class = "box" >
<img src="img/KakaoTalk_20240205_094041866_00.jpg" width = "300" alt="슬라이드1" class ="title-left">
<img src="img/KakaoTalk_20240205_094041866_01.jpg" width = "300" alt="슬라이드2" class ="title-right" style="display: none;">
</div>
<script>
setTimeout(function() {
var right = document.querySelector(".title-right");
right.style.display = "inline";
},1000);
</script>
1초뒤 2번째 이미지가 생성된다.
'JS > JS-event' 카테고리의 다른 글
| BOM - history (0) | 2024.02.05 |
|---|---|
| 노드 삭제 (1) | 2024.02.05 |
| 요소생성 - 노드생성 및 추가 (0) | 2024.02.05 |
| BOM -인터벌예제 (0) | 2024.02.05 |
| BOM (인터벌) (0) | 2024.02.05 |
