Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- udemy
- 취준생
- s3
- github
- 프론트엔드배포
- 깃허브 레포지토리와 로컬 코드 연결하기
- 하나은행
- 디지털하나로입학식
- 웅진씽크빅
- 유데미
- 스나이퍼팩토리
- 맥북백틱입력
- 개발자교육과정
- 디지털하나로
- 백틱
- 버전생성프로세스
- kdt
- 맥북백틱
- 네이버로그인창만들기
- Next.js
- 프론트엔드개발자양성과정
- DIGITALHANARO
- 프로젝트캠프
- `
- 디지털교육
- 미래내일일경험
- 배포
- 디지털취업
- 부트캠프
Archives
- Today
- Total
Land of Joe
[JavaScript] setTimeout, setInterval 타이머 설정하기 본문
setTimeout()
: 일정 시간이 지나면 코드를 실행해주는 자바스크립트의 기본 함수
setInterval()
: 일정 시간마다 코드를 실행해주는 자바스크립트의 기본 함수
setTimeout(function(){실행코드}, 시간);
setInterval(function(){실행코드}, 시간);
시간은 ms 단위 (1000ms는 1초)
setTimeout 예시)
5초 후에 div 박스 사라지게 만들기
<div class="alert alert-danger">
5초 이내 구매시 사은품 증정!
</div>
<script>
setTimeout(function(){
document.querySelector('.alert').style.display='none'
}, 5000)
</script>
setInterval 예시)
5초 중 1초마다 숫자 작아지고
타임아웃되면 div 박스 사라지게 만들기
<div class="alert alert-danger">
<span class='min'>5</span>초 이내 구매시 사은품 증정!
</div>
<script>
var timer = setInterval(countDown, 1000)
function countDown(){
if (document.querySelector('.min').innerHTML>0) {
document.querySelector('.min').innerHTML-=1;
} else {
clearTimeout(timer);
document.querySelector('.alert').style.display='none';
}
}
</script>
countDown이라는 콜백함수를 만들었지만
document.querySelector('.min').innerHTML이 중복되어 코드가 깔끔하지 못함
<div class="alert alert-danger">
<span class='min'>5</span>초 이내 구매시 사은품 증정!
</div>
<script>
var count=5;
setInterval(function(){
count-=1;
if(count>=0){
document.querySelector('.min').innerHTML = count;
}
}, 1000)
</script>
변화하는 초 값을 count 변수로 만들어 document.querySelector('.min').innerHTML에 입력한다
'🌐 Web > 🟡 JavaScript' 카테고리의 다른 글
[JavaScript] function 문법 (0) | 2022.11.22 |
---|---|
[JavaScript] 문자 중간에 변수 넣기(백틱) (0) | 2022.10.18 |
[JavaScript] 이벤트 버블링 (0) | 2022.10.12 |
[JavaScript] 탭 기능 구현하기, for 반복문 (0) | 2022.10.11 |
[JavaScript] 스크롤 이벤트 (0) | 2022.10.10 |