타이머를 만들어보자.

으음... 자바 스크립트에 관한 강의를 쓰기 시작하려고 하는데 말이죠... 사실, 저는 자바 스크립트를 전문적으로 배웠다거나 한 것은 아닙니다. 그냥 여기저기 기웃거리면서 독학으로 배운게 전부이기에 틀린 부분이 있을 수도 있고, 조잡하게 만들어지는 부분이 있을 수 있습니다. 그런 점은 좀 양해 해주시길 바랍니다!

아, 참고로 말하자면 제가 강의하는 자바 스크립트의 경우에는 대부분 Jquery를 조금이라도 사용하니 유의하시길.

그럼, 이제부터 시작해보겠습니다. 

이번에 만들어 볼 타이머는 거창한 기능같은게 있는게 아닌, 정말 말 그대로 타이머 기능에만 충실한 녀석입니다.

타이머에 필요한게 뭐가 있겠습니까? 시간이 흐르게 하고, 시간이 다 지나면 띵똥띵똥 하면서 알림음이 울리도록 만들면 되는겁니다. 뭐, 추가로 알림이 울린 후 다시 타이머가 작동하게 만드는 기능이 있는 것도 좋겠지요.

그럼 그런 타이머를 만들기 위해서 가장 먼저, 타이머의 틀을 만들어 보도록 합시다.

00 : 00 : 00

	 
	 
	

위의 코드처럼 몇줄 되지 않는 매우 간단한 모양의 틀을 만들었습니다. *당연히 jquery 연결 부분이나 html, body 같은 부분은 입력해주셔야 합니다!

자, 그럼 이제부터 이 간단한 틀을 이용해 타이머의 기능을 만들어 보도록 하겠습니다.

다만... 그 전에! 타이머의 작동방식을 결정해야 하는데요. 타이머를 1초마다 1씩 줄어들게 하는 방법과, 실제 시간을 이용해 작동하게 하는 방법이 있습니다.

전자의 경우에는 만들기가 쉽다는 장점이 있지만 컴퓨터의 작업량이 많아지거나 할 경우 시간이 조금씩 차이날 수 있습니다. 그리고 후자는 정확도가 높은 대신 만들기가 전자에 비해 조금 더 귀찮다고 할 수 있죠. 물론, 매우 큰 차이가 난다는건 아니에요!

아무튼, 저는 이번 강의에서 실제 시간을 이용한 타이머를 만들어보도록 하겠습니다.

그럼 가장 먼저, 시작 버튼을 눌렀을 때 정해둔 시간이 조금씩 흘러가는 것을 만들어 보도록 합시다.

//변수 선언
var 종료시간, 워커;
var 시간=0, 분=15, 초=0; //타이머의 작동 시간 이 경우에는 15분
//선언 끝
function 시계작동(){ //타이머의 시간을 줄이는 부분
	var now = new Date(); //시간 비교용 변수
	var 남은시간 = 종료시간.getTime() - now.getTime(); //종료시간 까지 얼마나 남았는지 파악
	if(남은시간 <= 0){ //만약 시간이 다 줄었다면
		Timer_refresh(0); //남은 시간을 0으로 출력해줌.
		clearInterval(워커); //타이머를 종료함
		alert("타이머 끝!"); //끝났으니 알림.
	}else{ // 아닐 경우
		Timer_refresh(남은시간); //남은 시간을 출력해주는 함수를 호출.
	}
}

function n2(num){ //숫자를 2자리로 만들기 위함.
	return num > 10 ? num : "0" + num; //숫자가 10보다 작을 경우 앞에 0을 붙임.
}

function Timer_refresh(milisec){ //입력받은 값을 토대로 남은 시간을 출력해줌
	T_hour = parseInt(Math.floor(milisec/3600000)%24); //남은 시간중 '시간'을 계산함.
	T_min = parseInt(Math.floor(milisec/60000)%60); //남은 시간중 '분'을 계산함.
	T_sec =parseInt(Math.floor(milisec/1000)%60); //남은 시간중 '초'를 계산함.
	$('#time').html(n2(T_hour) + " : " + n2(T_min) + " : " + n2(T_sec)); //계산한 남은 시간들을 출력함.
}

$(document).ready(function() {
	$(document).on('click', '#start', function() { //스타트 버튼 클릭시
		종료시간 = new Date(); //종료 될 시간을 지정하기 위한 변수
		종료시간.setSeconds(종료시간.getSeconds()+시간); //종료될 시간을 지정
		종료시간.setMinutes(종료시간.getMinutes()+분); //종료될 시간을 지정
		종료시간.setHours(종료시간.getHours()+초); //종료될 시간을 지정
		워커 = setInterval(시계작동, 500); //워커라는 변수가 시계작동이라는 함수를 일정 간격마다 실행하게 만듬. 숫자 = 1/1000초
	});
});

위의 코드를 타이머가 들어간 html 파일에 붙여넣거나 js파일을 링크로 걸어주세요.

그리고 그렇게 연결을 시켜준다면 위에서 만들었던 타이머의 시작 버튼을 눌렀을 경우, 설정해놓은 15분이라는 시간이 생성되며 1초마다 시간이 줄어들게 됩니다.

물론, 이렇게만 만들면 제대로 된 타이머가 아니죠. 타이머라면 응당 일시정지와 정지 버튼이 있어야지 않겠습니까?

그러니 일단은 '정지'버튼을 먼저 만들어 보도록 하겠습니다. 솔직히, 세가지 버튼 중에 정지버튼이 제일 쉬워요. 단순히 정지하는게 아니라 리셋하는 거에 가깝지만요.

$(document).on('click', '#stop', function() { //정지 버튼 클릭시
	if(워커 != null){ //워커가 null이 아닐 경우
		Timer_refresh(0); //남은 시간을 0으로 출력해줌.
		clearInterval(워커); //타이머를 종료시킴.
		워커=null; //워커 초기화
	}
});

정지 버튼은 위의 코드 7줄로 끝입니다. 사실 7줄이라고 하기에도 조금 애매하죠...ㅋㅋ 그정도로 간단한 부분입니다.

아무튼, 위의 코드는 시작 버튼 부분에 있는 $(document).ready()의, 시작 버튼 아랫부분에 추가해주시면 됩니다.

그리고 마지막으로 일시정지 버튼을 만들어 보도록 하겠습니다.

//변수 선언
var 일시정지;
//선언 끝
$(document).on('click', '#pause', function() { //일시정지 버튼 클릭시
if(워커 != null){ //워커가 null이 아닐 경우
	if(일시정지 == null){ //일시정지가 null일 경우
		clearInterval(워커); //일단 타이머의 시간이 흐르지 않도록 중지.
		일시정지 = new Date(); //일시정지한 시간을 기록.
	}else{ //아닐 경우
		var tmptime = new Date(); //일시정지 해제를 위한 로컬 변수
		tmptime = tmptime - 일시정지; //현재 시간에서 일시정지를 한 시간을 빼줍니다 결과:일시정지를 한 이후부터 지금까지 흐른 시간.
		종료시간.setTime(종료시간.getTime()+tmptime); //종료될 시간에 위에서 계산한 시간을 더해줍니다.
		워커 = setInterval(시계작동, 500); //다시 타이머를 작동시킵니다.

		일시정지 = null; //다음번 일시정지를 위해서 초기화

	}
}
});

변수선언은 맨 위에서 했던 부분에 추가를 하시면 되고, 일시정지 버튼을 클릭했을 때의 코드는 정지 부분과 마찬가지로 $(document).ready()의 안에 넣어주시면 되겠습니다.

사실, 이게 무슨 강의냐고 할 수 있을 정도로 그냥 자료나 다름 없지만... 그래도 하다보면 나아지지 않을까 합니다.

코드 한줄 한줄 이게 어떤거고 어떤 식으로 작동하는지를 알려드려야 할테지만... 주석을 달고 나니까 딱히 쓸 건덕지가 없는 것 같아서 뭔가 강의랑은 맞지 않는 것 같네요. ㅠㅠ

완성본 다운로드