JavaScript
[Javascript] setTimeout으로 광고창 닫기 / setInterval로 타이머 만들기
heew0n
2023. 11. 11. 15:16
setTimeout으로 광고창 닫기
setTimeout은 일정 시간이 지난 후 함수를 실행 시킨다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="ad-box">
<h2>광고창이다!</h2>
<p>5초 후에 닫힙니다</p>
</div>
<script src="index.js"></script>
</body>
</html>const adBox = document.querySelector(".ad-box");
// 광고창이 n초 후에 사라지게 하기!
setTimeout(() => {
adBox.style.display = "none";
}, 5000);
display="none"을 사용하여 사라지게 만든다!
setInterval로 타이머 만들기
setInterval은 일정 시간 간격을 두고 함수를 실행시킨다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="ad-box">
<h2>광고창이다!</h2>
<p><span class="timer">3</span>초 후에 닫힙니다</p>
</div>
<script src="index.js"></script>
</body>
</html>// 설정한 n초에서 점점 숫자가 줄어들다 0이 되면 광고창이 사라진다!
const adbox = document.querySelector(".ad-box");
const timer = document.querySelector(".timer");
// count 값이 계속 변하니까 let으로 선언
// textContent : timer클래스 자리에 텍스트를 에 추가한다 ('n'초)
let count = Number(timer.textContent);
setInterval(() => {
console.log("setInterval 실행중??");
if (count > 0) {
count = count - 1;
timer.innerHTML = count;
} else {
adbox.style.display = "none";
}
}, 1000);
하지만 컴퓨터는 멈추지 않고 계속 실행 중이다
이를 위해 clearInterval(변수)를 사용해주면 된다
const adbox = document.querySelector(".ad-box");
const timer = document.querySelector(".timer");
let count = Number(timer.textContent);
const intervalId = setInterval(() => {
console.log("setInterval 실행중??");
if (count > 0) {
count = count - 1;
timer.innerHTML = count;
} else {
adbox.style.display = "none";
clearInterval(intervalId);
}
}, 1000);
정확히 4초 뒤에 멈추는 걸 볼 수 있다!
❗설정해놓은 시간은 3초
count 값이 0보다 작아야 멈추니까
3, 2, 1, 0까지 4초인 것이다!
