✔ 오늘의 강의
바닐라 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!!!"
✔ 완성 화면
'STUDY 📒 > Javascript' 카테고리의 다른 글
| [바닐라JS 챌린지] DAY 11 - Randomness (1) | 2024.03.01 |
|---|---|
| [바닐라JS 챌린지] DAY 8, 9 - 카지노 (0) | 2024.02.27 |
| [바닐라JS 챌린지] DAY5 과제 (0) | 2024.02.23 |
| [바닐라JS 챌린지] DAY4 과제 (0) | 2024.02.23 |
