<html 코드>
<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<h1>
timer
</h1>
<div class="timer">
<div><h4>0.00</h4></div>
</div>
</body>
</html>
다음 html 코드를 실행하면
아래와 같이 출력된다.
이제 자바스크립트와 제이쿼리를 이용해서 timer 아래의 숫자가 증가하게 만들어보자!
사실,,, 코드는 너무 너무 간단하다. 코드부터 보여드리고 설명을 진행하겠다.
<JavaScript Code>
// 시간을 담을 변수 t
var t=0;
function timer(){
// 0.01(10ms)초마다 t 값을 0.01 증가시키고
// 증가된 t 값을 timer 클래스 하위 html에 출력
setTimeout(function(){
t+=0.01;
$(".timer").html(`<h4><div>${t.toFixed(2)}</div></h4>`);
timer();
}, 10)
};
timer();
우선 시간 담을 변수 t 를 하나 선언해주고,
setTimeout 이라는 제이쿼리 함수를 이용해 제작했다.
toFixed()
html 태그 안의 toFixed() 함수는 소수의 자리수 길이를 제한하는 함수로, 아래와 같이 사용한다.
number.toFixed([digits])
나는 소수점 아래 두자리까지만 출력할 것이기 때문에 파라미터를 2로 넘겼다.
이 함수에 대해 더욱 자세한 설명을 원한다면 아래 링크로 가면 도움이 될 것 이다.
그렇지만 위의 설명만으로도 충분할 것 같긴하다.
opentutorials.org/course/50/133
toFixed - 생활코딩
요약(Summary) 소수의 자리수의 길이를 제한함 문법(Syntax) number.toFixed([digits]) 인자(Parameters) 인자명 데이터형 필수/옵션 설명 digits number 옵션 0~20까지의 정수, 생략하면 0과 같음 반환값(Return) String
opentutorials.org
setTimeout()
setTimeout() 함수는 시간 지연 함수로, 일정 시간 뒤에 실행시킨다.
형식은 다음과 같다.
setTimeout('실행 시킬 함수', 시간);
이 함수는 두번째 파라미터만큼의 시간이 지난 후 해당 함수를 한번만 실행시킨다.
한번만 실행시키기 때문에 timer 함수 실행을 함수의 내용 안에 넣었다.
다른 함수를 이용할 수도 있다.
< JavaScript Code >
// 시간을 담을 변수 t
var t=0;
function timer(){
// 0.01(10ms)초마다 t 값을 0.01 증가시키고
// 증가된 t 값을 timer 클래스 하위 html에 출력
setInterval(function(){
t+=0.01;
$(".timer").html(`<h4><div>${t.toFixed(2)}</div></h4>`);
}, 10)
};
timer();
위 코드는 setTimeout 함수가 아닌 setInterval 함수를 이용했다.
setInterval()
형식은 다음과 같다.
setInterval('실행 시킬 함수', 시간);
이 함수는 두번째 파라미터만큼의 시간이 지난 후 해당 함수를 반복하여 실행시킨다.
반복 실행하기 때문에 timer 함수 호출은 한번만 했다.
시간이 틱톡틱톡 흐른당
이걸 응용한다면 재밌는 게임을 만들 수 있다,,, 열심히 만들고 있다,,,
'Programming > JavaScript' 카테고리의 다른 글
| [ IDE 사용기 ] Sublime Text 설치 | Sublime Text 에디터 | IDE 추천 | 코드 에디터 추천 (0) | 2021.02.01 |
|---|---|
| [ JavaScript ] 자바스크립트 점과 점 사이의 거리 구하기 | 두 점 사이의 거리 코드 (0) | 2021.01.17 |
| [ JQuery ] JQuery 란 무엇인가 | JQuery 설치 | JQuery 기본 사용법 (0) | 2021.01.08 |
| [ JavaScript ] 자바스크립트 바인딩과 this | 자바스크립트 개념 (0) | 2021.01.08 |
| [ JSON ] JSON 이란? | JSON 개념 | JSON 예제 (0) | 2021.01.03 |
