Javascript를 활용하여 매 초마다 시간을 변경해서 웹페이지에 반영할 때 유용하게 쓸 수 있는 함수로 setInterval이 있다.
아래와 같이 실행할 함수 이름과 밀리초(ms) 단위의 시간을 파라미터로 활용할 수 있다. Chrome(구글 크롬) 브라우저에서 테스트한 결과, 실행할 함수는 "(쌍따옴표) 또는 '(따옴표)로 둘러싸야 정상적으로 실행이 되었다.
var timerID;
timerID = setInterval( "function_to_run()", 5000 );
setInterval은 한번 실행하고 멈추는 것이 아니고 파라미터로 입력한 주기마다 반복 실행하며, clearInterval 함수로 중지시킬 수 있다. 실행할 함수에 파라미터를 적용할 수는 없기 때문에, 파라미터가 있는 함수를 setInterval로 쓰고 싶다면 아래와 같이 쓸 수 있다. 원인을 파악하지 못했지만, 파라미터가 있는 함수를 파라미터로 쓸 때는 "(쌍따옴표)나 '(겹따옴표)를 쓰면 안된다.
var timerID;
timerID = setInterval( function(){ function_with_params(foo, bar); }, 5000 );
setInterval과 clearInterval을 활용하여 시계 형식으로 제한된 시간을 감소시키는 타이머 코드의 예제는 다음과 같다.
<script language="JavaScript">
var timerID; // 타이머를 핸들링하기 위한 전역 변수
var time = 119; // 타이머 시작시의 시간
/* 타이머를 시작하는 함수 */
function start_timer() {
timerID = setInterval("decrementTime()", 1000);
}
/* 남은 시간을 감소시키는 함수 */
function decrementTime() {
var x1 = document.getElementById("time1");
var x2 = document.getElementById("time2");
x1.innerHTML = toMinSec(time);
x2.innerHTML = toMinSec(time);
if(time > 0) time--;
else {
// 시간이 0이 되었으므로 타이머를 중지함
clearInterval(timerID);
// 시간이 만료되고 나서 할 작업을 여기에 작성
document.form.submit(); // 예: 강제로 form 실행
}
}
/* 정수형 숫자(초 단위)를 "시:분:초" 형태로 표현하는 함수 */
function toHourMinSec(t) {
var hour;
var min;
var sec;
// 정수로부터 남은 시, 분, 초 단위 계산
hour = Math.floor(t / 3600);
min = Math.floor( (t-(hour*3600)) / 60 );
sec = t - (hour*3600) - (min*60);
// hh:mm:ss 형태를 유지하기 위해 한자리 수일 때 0 추가
if(hour < 10) hour = "0" + hour;
if(min < 10) min = "0" + min;
if(sec < 10) sec = "0" + sec;
return(hour + ":" + min + ":" + sec);
}
</script>
Bryan_