• Q&A
  • 회원가입
  • 로그인

[Window] JS - setInterval() 메서드 ★★★ - 일정 시간 후 자동 반복 실행. (= setInterval메서드 = 셋인터벌) ※ 일정 시간 후 얼럿창 띄우기 ※ 마감 종료 전 남은 날짜시간 표시 (= D-day = Dday = 디데이)

731  

※ 일정 시간 후 어떤 행위를 반복해서 하게 할 때 사용.

 

setInterval() 예제 - 3초 후 경고창 띄우기

 

<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

 setInterval(function(){ alert("홈짱닷컴 Homzzang.com"); }, 3000);

}

</script>

 

결과보기

※ 클릭 후 3초 후에 홈짱닷컴 Homzzang.com 얼럿창 뜸. 확인 누르면 계속 3초 후 뜸.

 

setInterval() 예제 - 남은 날짜 표시 (= D-day = 디데이)

 

<style>

#endcount {color:red;}          

</style>


<?php

$end_day = "2021-12-31 23:59:59"; // 마감날짜

?>


<p id="endcount"></p>


<script>

var endDatetime = new Date("<?php echo $end_day?>").getTime();

var x = setInterval(function() {

    var now = new Date().getTime();

    var leftTime = endDatetime - now;

    var dd = Math.floor(leftTime / (1000 * 60 * 60 * 24));

    var hh = Math.floor((leftTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var mm = Math.floor((leftTime % (1000 * 60 * 60)) / (1000 * 60));

    var ss = Math.floor((leftTime % (1000 * 60)) / 1000);

 

    document.getElementById("endcount").innerHTML ="남은 시간: "+ dd + "일 " + hh + "시간 " + mm + "분 " + ss + "초";

    if (leftTime < 0) {

        clearInterval(x);

        document.getElementById("endcount").innerHTML = "마감";

    }

}, 1000);

</script>

 

둘레아빠 님 (211211) https://sir.kr/qa/441621



찾아주셔서 감사합니다. Since 2012