[javascript] 카운트다운 타이머 만들기 / 자바스크립트 setInterval()

setInterval() 을 이용해 카운트다운 타이머를 만들어 봅니다.

 

조건)

⭐️ 시간, 분, 초 를 입력할 수 있어야 합니다.

⭐️ start, stop, reset 버튼이 있어야 합니다.

⭐️ 각 버튼이 맞게 동작해야합니다.

⭐️ 카운트다운이 시작되면 시간 수정이 불가능합니다. ( 정지하거나 리셋하면 수정 가능)

 

목표는 기능이 잘 돌아가게끔 하는 거라 형태와 스타일은 간단히 작성합니다.

 

<div class="wrap">
        <div class="timer">
            <input type="num" class="hour" placeholder="00" value="20"/>
            <span class="symbol">:</span>
            <input type="num" class="min" placeholder="00" value="50"/>
            <span class="symbol">:</span>
            <input type="num" class="sec" placeholder="00" value="30"/>
        </div>
        <div class="btn-area">
            <button class="btn" onclick="startCountdown()"><span>START</span></button>
            <button class="btn" onclick="stopCountdown()"><span>STOP</span></button>
            <button class="btn" onclick="resetCountdown()"><span>RESET</span></button>
        </div>
    </div>

.wrap {padding-top:100px;}
.timer {display:flex;align-items:center;justify-content:center;}
input {width:150px;height:150px;background-color:#4c6ef5;border-radius:8px;border:none;text-align:center;font-weight:bold;font-size:2.5rem;}
input:disabled {color:initial;}
.symbol {margin:0 10px;font-weight:bold;font-size:2.5rem;}
.btn-area {display:flex;align-items:center;justify-content:center;margin-top:30px;}
.btn-area .btn {width:150px;height:50px;background-color:#a5d8ff;border-radius:8px;border:none;}
.btn-area .btn + .btn {margin-left:15px;}
.btn-area .btn span {color:#fff;font-size:1.5rem;font-weight:bold;}

 

 

⭐️ 스크립트

카운트 다운에 필요한 변수들을 먼저 선언해 줍니다.

let timer;
let hoursInput = document.querySelector('.hour');
let minutesInput = document.querySelector('.min');
let secondsInput = document.querySelector('.sec');

 

⭐️ 카운트다운 시작 함수

입력한 값을 토대로 시간을 초로 바꿔줍니다. 값이 0일 경우도 있으니 조건을 걸어줍니다.

setInterval() 함수를 사용해 1초 간격으로 카운트다운을 시작합니다.

 

숫자가 0이 되면 카운트다운을 중지하고 끝났다고 알림을 띄워줍니다.

 

function startCountdown() {
    // 입력된 값을 기반으로 시, 분, 초를 추출합니다.
    let hours = parseInt(hoursInput.value) || 0;
    let minutes = parseInt(minutesInput.value) || 0;
    let seconds = parseInt(secondsInput.value) || 0;

    // 시, 분, 초를 초 단위로 변환하여 총 초를 계산합니다.
    let totalSeconds = (hours * 3600) + (minutes * 60) + seconds;

    // 1초 간격으로 실행되는 함수를 설정하여 카운트다운을 시작합니다.
    timer = setInterval(function () {
        // 남은 시간이 0 이하인 경우 카운트다운을 중지하고 알림을 표시합니다.
        if (totalSeconds <= 0) {
            clearInterval(timer);
            alert("타임 업!");
        } else {
            // 총 초를 시, 분, 초로 다시 분해하여 입력란에 표시하고 1초 감소시킵니다.
            hours = Math.floor(totalSeconds / 3600);
            minutes = Math.floor((totalSeconds % 3600) / 60);
            seconds = totalSeconds % 60;

            hoursInput.value = String(hours).padStart(2, '0');
            minutesInput.value = String(minutes).padStart(2, '0');
            secondsInput.value = String(seconds).padStart(2, '0');

            totalSeconds--;
        }
    }, 1000);
}

setInterval() 함수는 어떤 코드를 일정 시간 동안 반복해서 사용하고 싶을 때 사용하는 함수입니다.

Math.floor 는 소수점 아래를 버려줍니다.

 

⭐️ 카운트다운 종료, 리셋함수

function stopCountdown() {
    // 카운트다운을 중지합니다.
    clearInterval(timer);
}

function resetCountdown() {
    // 카운트다운을 중지하고 입력란을 초기화합니다.
    clearInterval(timer);
    hoursInput.value = "00";
    minutesInput.value = "00";
    secondsInput.value = "00";
}

clearInterval() 함수는 setInterval() 함수를 멈추는 역할을 합니다.

 

 

⭐️결과

 

See the Pen Timer by jh-baek-95 (@jh-baek-95) on CodePen.