(DOM)setInterval로 알림창 만들기
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>set</title>
</head>
<body>
<div class="alert alert-danger">
<span id="num">5</span>초이내 구매 시 사은품 증정!
</div>
<script>
let count = 5; //5초부터 시작변수
let timer = setInterval(function () {
count --; //count감소 5, 4, 3, 2, 1, 0
if (count >= 0) { //0보다 크거나 같으면
document.querySelector("#num").textContent = count;
} else { //음수이면
clearTimeout(timer); //타이머종료
document.querySelector(".alert-danger").style.display = "none"; //화면에서 삭제
}
}, 1000);
</script>
</body>
</html>이런느낌으로 만들어보자~
카운트담을공간
타이머 공간
1초마다 카운트가 줄어든다
만약 카운트가 0보다 크면
카운트에 정보가 #num에 텍스트정보에 대입한다
음수이면
타이머를 종료시킨다🙋♀️기록하고 싶은 개념들
clearTimeout
clearTimeout() 메소드는 setTimeout() 메소드로 설정된 타이머를 제거
setTimeout()
setTimeout(function(){ 실행할코드~ }, 기다릴시간);
이거 쓰면 X초 후에 코드 실행.
setTimeout(function(){
console.log('안녕')
}, 1000); //1초후에 안녕 출력setInterval()
setInterval(function(){ 실행할코드~ }, 기다릴시간);
X초마다 코드를 실행하고 싶으면 setInterval()
setInterval(function(){
console.log('안녕')
}, 1000); //1초마다 안녕 출력value, textContent, innerHTML, innerText차이
input과 같은 form 요소의 값을 가져오고 싶을 때는 .value 를 사용하며
그 외 div 나 span 등의 요소 안에 있는 text를 읽고 싶을 때는 .textContent 의 메소드를 쓴다고 한다.
https://ninetynine-2026.tistory.com/509
예시
<div id="div1"> good evening <span>hello</span><span style="display:none">ya</span></div>콘솔창에 출력해보기
