[javascript/jquery] 자바스크립트 시계 타이머 함수 및 예제

[javascript/jquery] 자바스크립트 시계 타이머 함수 및 예제

 

 

javascript 에서

 

시계를 숫자로 표시하고자 할때,

 

즉 00:00:00 의 형식으로

 

시계를 표현하고 싶을때

 

아래 함수를 활용하시면 됩니다.

 

    function setTimer(){
        var time = new Date();
        var hour = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        if( minutes.toString().length == 1 ) {
            minutes = "0"+minutes;
        }
        if( seconds.toString().length == 1 ) {
            seconds = "0"+seconds;
        }        
        $("TARGET").html(hour +":" + minutes + ":"+seconds);
    }

 

위 내용처럼

 

hour / minutes / seconds 를 각각 구해서

 

TARGET 에 00:00:00 의 형식으로 표현해줍니다.

 

추가적으로

 

위 내용을 타이머로 표시하려면 아래처럼 활용하시면 됩니다.

 

    setTimer();
    setInterval(function() {
        setTimer();
    }, 1000);

 

위 setTimer 라는 함수를 페이지 시작되자마자 1회 호출하고

 

1000 의 interval 을 주어서 1초마다 반복 호출되도록 하면

 

시계가 가는 효과가 나타나게 됩니다!

 

참고들 하세요!