timer javascript 예제

22 Sep 2023

javascript

// 타이머 함수 정의
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

// 타이머 시작
window.onload = function () {
    var fiveMinutes = 5 * 60,
        display = document.querySelector('#timer');
    startTimer(fiveMinutes, display);
};

위의 예제는 JavaScript를 사용하여 간단한 타이머를 구현하는 방법을 보여줍니다. 타이머 함수는 지정된 시간동안 매 초마다 지난 시간을 표시하는 역할을 합니다.

예제를 실행하면 5분 동안 타이머가 작동하며, 웹 페이지의 id가 “timer”인 요소에 남은 시간이 표시됩니다. 타이머가 종료되면 다시 5분부터 시작됩니다.

이 예제를 사용하여 웹 페이지에서 시간을 제한하는 등 다양한 용도로 활용할 수 있습니다.

#JavaScript #타이머 #웹개발