STUDY 📒/Javascript

[바닐라 JS챌린지] DAY10 - Time Until Christmas!

South Dev 2024. 2. 29. 00:49

✔ 오늘의 강의

바닐라 JS로 크롬앱 만들기: From #5.0 to #5.3

 

✔ 목표

Date와 setInterval 함수들을 사용해 크리스마스이브까지 며칠이 남았는지 알려주는 시계를 만드세요.(12월 25일)

크리스마스까지 남은 날자와 시간

 

✔ 조건

 

힌트 :

- Date 생성자 [new Date()] : 시간을 나타내는 Date 객체를 생성하는 생성자입니다. Date 객체를 사용하기 위해 먼저 선언해 주어야 합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Date
- Date().getFullYear() : 2021처럼 4자리의 연도를 얻을 수 있는 함수입니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

- Math.floor : 주어진 수와 같거나 작은 수 중에서 가장 큰 정수를 반환하는 함수입니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

- setInterval : 인수로 전달받은 함수를 지정해 둔 일정한 간격으로

 

 

✔ 과정

html

<!DOCTYPE html>
<html>
  <head>
    <title>Time Until Christmas Eve<</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Time Until Christmas Eve</h1>
    <h2 class="js-clock">00일 00시 00분 00초</h2>
    <script src="src/index.js"></script>
  </body>
</html>

 

- 현재시간 js

const clockTitle = document.querySelector(".js-clock");

function getClock() {
  const date = new Date();
  
  const day = String(date.getDay()).padStart(2, "0");
  const hour = String(date.getHours()).padStart(2, "0");
  const min = String(date.getMinutes()).padStart(2, "0");
  const secont = String(date.getSeconds()).padStart(2, "0");

  clockTitle.innerText = `${day}일 ${hour}시 ${min}분 ${secont}초`;
}
getClock(); // getClock 즉시 호출
setInterval(getClock, 1000); // 매 초마다 getClock 실행

 

- 크리스마스이브 까지의 시간 JS

const clockTitle = document.querySelector(".js-clock");

function getClock() {
  const xmasEve = new Date("December 25, 2024 00:00:00 GMT+09:00").getTime();
  const currentDate = new Date().getTime();

  const timeDiff = xmasEve - currentDate;

  const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  const hours = Math.floor(
    (timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

  clockTitle.innerText = `${days}일 ${hours}시 ${minutes}분 ${seconds}초`;
}
getClock(); // getClock 즉시 호출
setInterval(getClock, 1000); // 매 초마다 getClock 실행

 

 

✔ 기억하고 싶은 점

1. padStart(), padEnd()

- 문자열(String)에서 쓸 수 있는 function

- 문자열의 길이를 특정 길이로 맞추기 위해 사용

- 주어진 길이까지 문자열을 특정 문자로 채우는 역할을 한다.

 

padStart() 메서드

- 문자열의 시작 부분에 주어진 길이까지 특정 문자열을 추가한다.

const originalString = "42";
const paddedString = originalString.padStart(5, "0");

console.log(paddedString); // 출력: "00042"

 

padEnd() 메서드

- 문자열의 끝 부분에 주어진 길이까지 특정 문자열을 추가한다.

const originalString = "Hello";
const paddedString = originalString.padEnd(8, "!");

console.log(paddedString); // 출력: "Hello!!!"

 

✔ 완성 화면

 

 

반응형