setTimeout
자바스크립트 기본 함수 중에 setTimeout() 이라는 함수가 있습니다 😀
setTimeout() 쓰면 n초 후에 코드를 실행해 줍니다!
<script>
setTimeout(function(){ 실행할 코드~ }, 기다릴 시간)
</script>이렇게 사용하시면 됩니다 :)
시간은 ms 단위로 적으면 됩니다!
예시
<script>
setTimeout(function(){
console.log('안녕하세요')
}, 1000);
</script>
이렇게 하면 1초 뒤에 콘솔창에 안녕하세요가 뜹니다 ^^
<div id="사은품">60초 이내 구매시 사은품을 증정해드려요
</div>
<script>
setTimeout(function(){
document.getElementById('사은품').remove();
}, 60000)
</script>이렇게 하면 60초 뒤에 div 박스가 사라집니다 ^^
setInterval()
자바스크립트 기본 함수 중에 setInterval() 이라는 함수가 있습니다 😀
setInterval() 쓰면 n초마다 코드를 실행해 줍니다!
<script>
setInterval(function(){ 실행할 코드~ }, 기다릴 시간);
</script>이렇게 사용하시면 됩니다:)
그럼 n초마다 안에 있는 코드를 실행해 줍니다!
예시
<script>
setInterval(function(){
console.log('안녕하세요')
}, 1000);
</script>이렇게 하면 1초마다 콘솔창에 안녕하세요가 뜹니다 ^^
적용
<div id="사은품">60초 이내 구매시 사은품을 증정해드려요 (60초 후 삭제됩니다)
</div>60초 이내에서 1초마다 '60'이라는 문자를 1씩 감소시켜 보기
0초가 되면 div를 안 보이게 처리하기
✍️ 코드
<div class="alert alert-danger" id="사은품"><span id="초">60</span>초 이내 구매시 사은품을 증정해드려요 (60초 후 삭제됩니다)- '60'문자를 span으로 감싼다
- '60'문자에 id 부여한다
<script>
let 초세기 = 60;
setInterval(() => {
초세기 = 초세기 - 1; // '60'이 1씩 줄어들 게
if (초세기 >= 0) {
document.getElementById('초').innerHTML = 초세기
} //0이 될 때까지만
}, 1000);
</script>- '60'을 변수로 두고.. setInterval을 사용해서 '60'이 '0'이 될 때까지 1초마다 1씩 줄어들 게 한다
<script>
setTimeout(function(){
document.getElementById('사은품').remove();
}, 60000)
</script>- setTimeout을 사용해서 60초 후에 div 를 없애줍니다!
✨ 완성 ✨
Retrospect 🧐
실제로 적용해 보니 넘나 신기허당 재미따 ㅎ-ㅎ
