자바스크립트 - setInterval 이용하여 시계 만들기

자바스크립트 타이머 함수 setInterval과 clearInterval을 이용하여

현재 시간이 계속 나오는 시계를 만들어 보도록 하겠습니다.

 

setInterval

setInterval은 일정 시간 간격으로 함수를 계속 실행시키는 함수입니다.

두 개 파라미터를 받고

첫 번째는 실행시킬 함수

두 번째는 시간입니다.

시간의 경우에 ms 단위라서 1초의 경우 1000ms입니다.

 

아래와 같이 실행시키고 싶은 함수를 첫 번째 인자에 작성하고

반복적으로 실행시킬 시간을 두 번째 인자에 작성합니다.

setInterval(function() {
   // to do something
}, 1000)

반응형

clearInterval

clearInterval은 setInterval로 실행시킨 반복을 중단할 때 쓰는 함수입니다. 

setInterval을 변수에 담고 해당 변수를 clearInterval 파라미터에 넣으면 됩니다.

아래와 같이 사용할 수 있습니다.

const interval = setInterval(function() {
   // to do something
}, 1000);

clearInterval(interval);

 

setInterval과 clearInterval을 이용해서

시계를 만들어보고 시작과 중단 버튼을 만들어 보겠습니다.

 

아래처럼 1초 간격으로 시간을 변경해 주는 setInterval 함수를 만들었고

중단 버튼을 누르면 반복이 중단되는 버튼을 만들었습니다.

let interval;
const btnStart = document.getElementById('start')
const btnStop = document.getElementById('stop');

btnStart.addEventListener('click', function() {
  interval = setInterval(function() {
    const h1 = document.getElementsByTagName('h1')[0];
    h1.innerHTML = new Date().toString();
  }, 1000)
})

btnStop.addEventListener('click', function() {
  clearInterval(interval);  
})

아래 코드펜에서 시작과 중단 버튼을 클릭하시면 확인할 수 있습니다.

See the Pen setInterval - timer by powerku (@powerku) on CodePen.

 

감사합니다.