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

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

목차
  1. setInterval() 예제 - 1초마다 텍스트 표시
  2. setInterval() 정의
  3. setInterval() 구문
  4. setInterval() 예제 - 3초 후 경고창 띄우기
  5. setInterval() 예제 - 남은 날짜 표시 (= D-day = 디데이)
  6. setInterval() 예제 - 디지털 시계 (시간 멈춤 기능 X)
  7. setInterval() 예제 - 디지철 시계 (시간 멈춤 기능 O)
  8. setInterval() 예제 - 진행바/진도바 (애니 효과 적용 O)
  9. setInterval() 예제 - 0.5초마다 배경색 변경 (= 배경 깜빡깜빡)
  10. setInterval() 예제 - 함수로 매개변수 전달 방법

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

 

setInterval() 예제 - 1초마다 텍스트 표시

[방법1] - 함수 이용 X

 

<p id="hz"></p>


<script>

const hz = document.getElementById("hz");

setInterval(function() {hz.innerHTML += "홈짱닷컴 Homzzang.com<br>"}, 1000);

</script>

 

결과보기


[방법2] - 함수 이용 O

 

<p id="hz"></p>


<script>

setInterval(homzzang, 1000);


function homzzang() {

  document.getElementById("hz").innerHTML += "홈짱닷컴 Homzzang.com<br>";

}

</script>

 

결과보기

 

setInterval() 정의

 

지정된 간격(밀리초)으로 함수를 호출.

 


 

1.

함수 호출은 아래 경우 발생 때까지 지속.

 

2.

1 second(초) = 1000 milliseconds(밀리초)

 

3. cf.

setTimeout() 메서드 - 함수 1회만 실행.

 

4. clearInterval() 메서드 사용법
id = setInterval(function, milliseconds);

clearInterval(id);

 

5. 관련 메서드

  • setInterval() 메서드 - 일정 시간마다 반복해 함수 실행
  • clearInterval() 메서드 - setInterval() 해제
  • setTimeout() 메서드 - 1회만 함수 실행
  • clearTimeout() 메서드 - setTimeout() 해제

 

6.

모든 브라우저 지원.

 

7. MDN setInterval() 예제 보기

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

 

 

setInterval() 구문

 

방법1 - IE9 이하 경우 작동 X

setInterval(myFunc, milliseconds, param1, param2, ...)

 

방법2 - 모든 브라우저 작동 O
setInterval(function() {myFunc("param1", "param2")}, milliseconds)


[매개변수]

 

myFunc

필수. 실행할 함수

 

milliseconds

필수. 밀리초 (1/1000초) ※ 10보다 작으면, 10 사용.

param1, param2, ...

선택. 함수로 전달할 매개변수

  • 방법1 경우, IE9 이하 지원 X
  • 방법2 경우, 모든 브라우저 지원 O

 


[반환값]

 

타이머 id를 숫자로 반환.

※ 해당 id를 clearInterval(id) 매서드에 전달해 반복 멈춤.

 

 

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

 

setInterval() 예제 - 디지털 시계 (시간 멈춤 기능 X)

 

<p id="demo"></p>


<script>

setInterval(homzzang, 1000);


function homzzang() {

  const date = new Date();

  document.getElementById("demo").innerHTML = date.toLocaleTimeString();

}

</script>

 

결과보기

 

setInterval() 예제 - 디지철 시계 (시간 멈춤 기능 O)

 

<p id="demo"></p>


<button onclick="stopTime()">시간멈추기</button>


<script>

const hz = setInterval(homzzang, 1000);


function homzzang() {

  const date = new Date();

  document.getElementById("demo").innerHTML = date.toLocaleTimeString();

}


function stopTime() {

  clearInterval(hz);

}

</script>

 

결과보기

 

setInterval() 예제 - 진행바/진도바 (애니 효과 적용 O)

 

<style>

#hz {

  width: 100%;

  height: 30px;

  position: relative;

  background-color: silver;

}


#bar {

  background-color: blue;

  width: 10px;

  height: 30px;

  position: absolute;

}

</style>


<div id="hz">

  <div id="bar"></div>

</div>

<br>

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


<script>

function homzzang() {

  const bar = document.getElementById("bar");   

  let width = 0;

  const pgs = setInterval(progress, 10);

  function progress() {

    if (width == 100) {

      clearInterval(pgs);

    } else {

      width++; 

      bar.style.width = width + '%'; 

    }

  }

}

</script>

 

결과보기

 

setInterval() 예제 - 0.5초마다 배경색 변경 (= 배경 깜빡깜빡)

 

<button onclick="stopColor()">토글 멈추기</button>


<script>

hz = setInterval(homzzang, 500);

 

function homzzang() {

  let x = document.body;

  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";

}

 

function stopColor() {

  clearInterval(hz);

}

</script>

 

결과보기

 

setInterval() 예제 - 함수로 매개변수 전달 방법

[올바른 방법]

 

<p id="demo1"></p>

<p id="demo2" style="color:red;"></p>


<script>

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


function homzzang(a, b) {

  document.getElementById("demo1").innerHTML += a + " " + b + "<br>";

  document.getElementById("demo2").innerHTML = "매개변수: " + a + " " + b;

}

</script>

 

결과보기


[틀린 방법] - 아래처럼 하면, IE9 이하 경우 작동 X

 

<p id="demo1"></p>

<p id="demo2" style="color:red;"></p>


<script>

setInterval(homzzang, 2000, "홈짱닷컴", "Homzzang.com");


function homzzang(a, b) {

  document.getElementById("demo1").innerHTML += a + " " + b + "<br>";

  document.getElementById("demo2").innerHTML = "매개변수: " + a + " " + b;

}

</script>

 

결과보기 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

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