간단한 디데이 타이머
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>크리스마스 디데이</h1>
<h2 id = "clock">00:00:00</h2>
<script src="dday.js"></script>
</body>
</html>
|
cs |
Html에 JS에서 불러올 수 있는 id나 class를 가진 항목을 만듭니다.
|
1
2
3
4
5
6
|
const clock = document.querySelector("#clock");
const SECOND = 1000; //초
const MINUTE = 1000 * 60; //분
const HOUR = 1000 * 60 * 60; //시
const DAY = 1000 * 60 * 60 * 24; //일
|
cs |
시계를 만들어 주기 위해 JS에서 Html 요소를 불러옵니다.
자바스크립트에서 시간은 ms(밀리초)단위를 쓰기 때문에1초 = 1000ms를 기준으로 변수를 선언해줍니다.
초 = 1000
분 = 1000 * 60
시간 = 1000 * 60 * 60
일 = 1000 * 60 * 60 *24
다음은 디데이 함수를 만듭니다
기본적인 틀은 (d-day) - (현재 날짜)을 해서 나온 (값)을
초 분 시간 일 단위로 나누어서 가져오는 것입니다.
|
1
2
3
4
5
6
7
8
9
|
const dday = new Date("2022-12-24 00:00:00");
//크리스마스 dday를 new Date에 넣어주고 변수로 선언해줍니다
const nowdate = new Date();
//현재 날짜를 가져옵니다
const gap = dday - nowdate;
//dday - 현재날짜를 뺀 값을 변수로 선언해줍니다
|
cs |
위에서 말했듯이 자바스크립트에서는 시간을 ms(밀리초) 단위를 쓰기 때문에
gap의 값도 ms(밀리초)로 나옵니다
gap을 변수로 선언한 일 시간 분 초로 나누어 준 뒤
그리고 그 값을 clock의 innerText로 넣어줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const days = gap / DAY;
const hours = (gap % DAY) / HOUR;
/*gap / DAY의 나머지값을 24시간으로 나누어 주면
시간값이 나오기 때문에 %(나머지값)을 써준다.*/
const minutes = (gap % HOUR) / MINUTE;
//gap / HOUR의 나머지값을 분으로 나누어준다.
const seconds = (gap % MINUTE) / SECOND;
//gap / MINUTE의 나머지값을 초로 나누어준다.
clock.innerText = `${days}일 ${hours}시 ${minutes}분 ${seconds}초 남았습니다!`;
|
cs |
완성?!
이 아니라 이렇게만 한다면 매우 지저분한 값과 함께 새로고침을 할 때에만 갱신이 되기 때문에
함수를 만들어 1초마다 갱신되게 만들어줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function getClock() {
const dday = new Date("2022-12-24 00:00:00");
const nowdate = new Date();
const gap = dday - nowdate;
const days = Math.floor(gap / DAY);
const hours = Math.floor((gap % DAY) / HOUR);
const minutes = Math.floor((gap % HOUR) / MINUTE);
const seconds = Math.floor((gap % MINUTE) / SECOND);
clock.innerText = `${days}일 ${hours}시 ${minutes}분 ${seconds}초 남았습니다!`;
}
getClock();
//getClock()를 해주는 이유 : 웹이 로드 되자마자 바로 나타나게 하기위해서
setInterval(getClock, 1000);
//setInterval = 다음 함수가 지연시간마다 실행하게 해준다
//여기서는 getClock이라는 함수를 1000ms(1초)마다 실행하게
|
cs |
setInterval이 1000ms(1초)마다 getClock 함수를 불러와주기 때문에 새로고침을 안 해도
갱신이 됩니다.
하지만 여기서 또 다른 문제가 생기는데
2분 9초가 아닌 02분 09초처럼 두 자리 숫자로 나오게 하고 싶은데
이것은 padStart라는 메서드로 해결할 수 있습니다.
padStart: 첫번째는 string의 개수, 두번째는 첫번째 조건이 아닐경우
ex)"3".padStart(3,"0"); = "003"으로 나온다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function getClock() {
const dday = new Date("2022-12-25 00:00:00");
const nowdate = new Date();
const gap = dday - nowdate;
const days = String(Math.floor(gap / DAY)).padStart(2, "0");
const hours = String(Math.floor((gap % DAY) / HOUR)).padStart(2, "0");
const minutes = String(Math.floor((gap % HOUR) / MINUTE)).padStart(2, "0");
const seconds = String(Math.floor((gap % MINUTE) / SECOND)).padStart(2, "0");
clock.innerText = `${days}일 ${hours}시 ${minutes}분 ${seconds}초 남았습니다!`;
}
getClock();
setInterval(getClock, 1000);
|
cs |
const days = String(Math.floor(gap / DAY)).padStart(2, "0");
String으로 값을 감싸준 이유는 일,시간등으로 나온 값은 string이 아닌 number이고
padStart는 string을 인자로 받아야 되기 때문에 string으로 변환을 해줘야됩니다.
완성!
'코딩이야기 > JS공부' 카테고리의 다른 글
| [JavaScript] - To Do List 만들기② (0) | 2022.07.19 |
|---|---|
| [JavaScript] - To Do List 만들기① (0) | 2022.07.19 |
| [JavaScript] - 로그인 폼 만들기 ② (0) | 2022.07.15 |
| [JavaScript] - 로그인 폼 만들기 ① (0) | 2022.07.15 |
| [JavaScript] 랜덤숫자게임 (0) | 2022.07.11 |
