시간은 쉬울 것 같다가도 막상 잡게 되면 어렵다. 특히 그냥 단순 현재 시간을 보여주면 되는 게 아니라 UI에 잘 맞게 구현해야하기 때문에 생각보단 까다롭다. 구현할 일이 많을 것 같으니 익혀두기 위해 기록하자!
JavaScript Date() 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임스탬프를 담는다.
Constructor
Date()
함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환한다.
new Date()
생성자로 호출할 경우 새로운 Date 객체를 반환한다.
Static method
Date.now()
1970년 1월 1일 00:00:00 UTC로부터 지난 시간을 밀리초 단위의 숫자 값으로 반환한다.
Instance method
Date.prototype.getDate()
Date에서 현지 시간 기준 일(1–31)을 반환한다.
Date.prototype.getDay()
Date에서 현지 시간 기준 요일(0–6)을 반환한다.
Date.prototype.getHours()
Date에서 현지 시간 기준 시(0–23)를 반환한다.
console.dir()로 내부 구조 확인하기
const date = new Date();
console.dir(date);
적용해보자
복습 겸 아무것도 없는 index 파일 + JS로 만들어보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="clock">00:00:00</h1>
<script src="../js/clock2.js"></script>
</body>
</html>정말 시계 하나만을 위한 html 파일을 하나 만들어주었다.
const clock = document.querySelector("#clock");
function getClock() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();우선 이렇게 배운 것들만으로 적용했다. 그러면 문제가 생긴다! 호출한 시간대만 출력되고 갱신되지 않음.
여기서 내장 메서드를 사용해야 한다.
setInterval()
Window 및 Worker 인터페이스에서 제공되는 setInterval() 메서드는 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행한다.
이 메서드는 간격(interval)을 고유하게 식별할 수 있는 Interval ID를 반환하므로 나중에 clearInterval() 함수를 호출하여 제거할 수 있다.
setInterval(code);
setInterval(code, delay);
setInterval(func);
setInterval(func, delay);delay는 밀리초(1/1000) 단위의 시간이고, 지정하지 않으면 기본 값은 0이다.
아까 작업한 부분에 적용해보겠다.
const clock = document.querySelector("#clock");
function getClock() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);적용을 해보니 잘 반영된다. 하지만 문제가 있다. 00:00:00 처럼 숫자가 전부 2개씩 처리 되었으면 좋겠다.
String.prototype.padStart()
padStart()메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.
채워넣기는 대상 문자열의 시작(Left)부터 적용된다.
str.padStart(targetLength [, padString])targetLength
목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환한다.
padString
현재 문자열에 채워넣을 다른 문자열, 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣는다.
참고로 이건 String이라 앞에 쓴 Number를 전부 변환해주어야 작동한다.
const clock = document.querySelector("#clock");
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, 0);
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
확실히 복습을 해보니까 더 기억에 잘 남는 것 같다. 🌞
CharGPT 🤖
'JavaScript' 카테고리의 다른 글
| `innerText`와 `innerHTML`의 차이점을 알아보자! (0) | 2023.08.29 |
|---|---|
| 내장객체 Math로 랜덤 Background Image 적용하기 (2) | 2023.08.29 |
| Submit시 Event.preventDefault()로 새로고침 Reload 방지하기 (2) | 2023.08.29 |
| 로컬 스토리지 localStorage 와 세션 스토리지 sessionStorage (0) | 2023.08.28 |
| 상수를 대문자로 쓰는 이유? 뿌리를 알아보자! (0) | 2023.08.28 |