javascript로 현재 날짜와 시간 구하기

📒 Date()

javascript로 현재 날짜와 시간을 구할 때, 공통적으로 쓰이는 함수가 Date()이다.

이 함수는 국제 표준시(1970년 1월 1일 0시 0분 0초)를 기준으로 현재 날짜와 시간을 알려준다.

🔎 예시

const today = new Date();
console.log(today);
// 결과 Tue Dec 26 2023 13:07:12 GMT+0900 (한국 표준시)

여기에 추가 메서드를 사용하면 특정 결과 값을 가져올 수 있다.

아래는 주로 사용하는 메소드이다.

const year = today.getFullYear();	// 연도
console.log(year); // 결과 2023
const month = today.getMonth();		// 월
console.log(month); // 결과 11
const date = today.getDate();		// 일
console.log(date); // 결과 23
const day = today.getDay();		// 요일
console.log(day); // 결과 2
const hour = today.getHours();		// 시간
console.log(hour); //결과 13
const min = today.getMinutes();		// 분
console.log(min); //결과 7
const sec = today.getSeconds();		// 초
console.log(sec); //결과 12

💣주의

위에 나온 것처럼 메소드를 통해 값을 구하면 결과가 숫자로 나온다.

그 중에 getMonth()는 배열이기 때문에 0부터 시작한다.

따라서 실제 값보다 1보다 작게 나와서 따로 +1을 해줘야 한다.

const month = today.getMonth() + 1;
console.log(month); // 결과 12

getDay() 역시 배열이다.

0부터 6까지 있으며, 일요일부터 시작한다.

이를 글자로 나오게 하고 싶다면 아래처럼 사용하면 된다.

const daysNum = today.getDay();
const daysTrans = ['일','월', '화', '수', '목', '금', '토']
const day = daysTrans[daysNum];

📒 웹에 나타내기

앞서 내용들은 결과 값을 구하는 방법에 대해 설명했다.

그렇다면 이 값을 화면에 표현하는 방법에 대해 알아보자.

방법은 간단하다.

원하는 class나 id에 결과 값을 넣으면 된다.

이를 위해선 querySelector()함수와 innerText()를 사용한다.

querySelector()는 html 내에서 class나 id값을 선택할 수 있다.

<body>
  <p calss="currentDay"></p>
  <p id="currentTime"></p>
  
  <script>
    const currentDay = document.querySelector(".currentDay");
    const currentTime = document.querySelector("#currentTime");
  </script>
</body>

innerText()는 텍스트를 추가하거나 읽어오는 기능을 한다.

const currentDay = document.querySelector(".currentDay");
const currentTime = document.querySelector("#currentTime");
currentDay.innerText = `${year}년 ${month}월 ${date}일 ${day}요일`;
currentTime.innerText = `${hours}시 ${min}분 ${sec}초`;

📒 실시간으로 나타내기

여기까지 구현했다면 거의 끝이다.

현 상태에서는 웹이 실행된 시점을 기준으로 시간이 나온다.

이후에 시간이 흘러도 시간은 기준시간에 멈춰있다.

이를 위해선 자동으로 갱신하여 시간을 나타내야 한다.

이 때 setInterval() 사용 시, 특정 코드를 지정된 시간마다 재실행한다.

시간의 단위는 1000밀리초이다.

// 문법
setInterval(함수명, 시간);

//예시
setInterval(getTimes, 1000);
function getTimes() {
  const today = new Date();
  const hour = today.getHours();	
  const min = today.getMinutes();
  const sec = today.getSeconds();
  const currentTime = document.querySelector("#currentTime");
  currentTime.innerText = `${hours}시 ${min}분 ${sec}초`;
}

'Javascript' 카테고리의 다른 글

ClassList 총정리 (className과 비교) (0)	2024.02.05
윈도우 창 크기 알아내기 (0)	2024.02.01
토글 버튼 구현하기 (+ 'X'자 버튼 만들기) (0)	2024.01.19
JS로 말 줄임 표시 구현하기(+CSS 구현) (1)	2024.01.09
모달 팝업 만들기 (240105 주의 사항 추가) (0)	2024.01.02

Study With me

javascript로 현재 날짜와 시간 구하기

📒 Date()

🔎 예시

💣주의

📒 웹에 나타내기

📒 실시간으로 나타내기

'Javascript' 카테고리의 다른 글

티스토리툴바

javascript로 현재 날짜와 시간 구하기

📒 Date()

🔎 예시

💣주의

📒 웹에 나타내기

📒 실시간으로 나타내기

'Javascript' 카테고리의 다른 글

'Javascript' Related Articles

티스토리툴바