본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[자바스크립트] 일정간격으로 배경 색 변경하기- setInterval

by [바가지] 2018. 6. 20.
반응형

 

 

자바스크립트를 이용하여 일정시간 후 이벤트를 발생시키거나, 일정시간마다 이벤트를 발생시키는 방법에 대하여 알아 보도록 하겠습니다.

이번 예제는 일정 시간(3초) 후 또는 일정시간(1초)마다 배경색을 랜덤으로 변경시키는 것 입니다.

먼저 소스 및 설명 아래에 있는 결과확인하기 부분에서 어떻게 발생되는지 버튼을 클릭해 보고 확인 해 보시면 이해하기 쉬울 것 입니다.

 

  자바스크립트 소스 및 설명

<!DOCTYPE html>
<html>
  <head>
    <title>일정시간마다 이미지 변경하기</title>
  </head>

  <script type="text/javascript">
    var timeout;  //변수선언
    var interval;  //변수선언

 

    function startAct1(){

      //선언한변수 = 한번실행함수(실행시호출 할 함수, 시간설정-3초후실행)
      timeout = setTimeout('chImg()',3000);
    }
 
    function stopAct1(){

      //setTimeout을 중지시키는 함수(중지대상 변수)
      clearTimeout(timeout);
    }
   
    function startAct2(){

      //선언한변수 = 반복실행함수(실행시호출 할 함수, 시간설정-1초후실행)
      interval = setInterval('chImg()',1000);
    }

    function stopAct2(){

      //setInterval을 중지시키는 함수(중지대상 변수)
      clearInterval(interval);
    }
   
    function chImg(){

       //변수 = 랜덤함수(100에서 999999까지의 숫자 중 랜덤으로 생성시킨다)
       var ranNo = Math.floor(Math.random() * 999999) + 100;

       //id값이 imgView인 영역의 바탕색을 랜덤함수로 획득한 값으로 변경한다.
       document.getElementById("imgView").style.backgroundColor = "#" + ranNo;
    }
  </script>

  <body>
    <div id="imgView" style="width:90%; height:350px;"></div>
    <br>
    <input type="button" value="한번실행" onClick="startAct1()">&nbsp;

    <input type="button" value="한번실행중지" onClick="stopAct1()">
    <br>
    <input type="button" value="반복실행" onClick="startAct2()">&nbsp;

    <input type="button" value="반복실행중지" onClick="stopAct2()">
  </body>
</html>

 

  결과 확인하기(버튼을 눌러 예제 결과를 확인 해 보세요)


 
 

 

  정리

- setTimeout : 일정 시간 후 한번 실행

- setInterval : 일정 시간마다 반복 실행

- clearTimeout : 일정 시간 후 한번 실행하는 것을 중지 합니다.

- clearInterval : 일정시간마다 반복하는 것을 중지 합니다.

 

  마무리

setInterval 함수를 이용하면 배경이미지를 일정시간마다 변경 할 수도 있으며, 더욱 다양한 기능을 구현 해 볼 수 있을 것 입니다. 그러나 생각보다는 많이 사용되지는 않는 것 같습니다.

 

반응형