D-day 만들기

💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗

사용한 내장 함수

◾ new Date() = 현재 날짜 및 시간

◾ setInterval() = (사용할 함수명, 실행 간격(시간)) ✔ 1초는 1000 으로 표기한다.

◾ Math.floor() = 내림함수 ✔ (5.1 = 5 , 5.9 = 5)

◾ String() = 정수로 만들어주기

◾ padStart = 지정한 빈공간 padding 넣어주기 (지정한 공간, 넣어줄 자료형) ✔ (2, "0")

1. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <h1 class="practice">크리스마스까지 남은 시간 </h1>
    <h2 id="clock"></h2>
    <script src="./js/index.js"></script>
</body>
</html>

2. js

const clocked = document.querySelector("#clock");

function setclocked() {
    const setdate = new Date("2024-12-25T00:00:00");
    const newdate = new Date();
    const distance = setdate - newdate;
    const seconds = String(Math.floor((distance / 1000) % 60)).padStart(2, "0");
    const minutes = String(Math.floor((distance / (1000 * 60)) % 60)).padStart(2, "0");
    const hours = String(Math.floor((distance / (1000 * 60 * 60)) % 24)).padStart(2, "0");
    const day = String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, "0");
   
    clocked.innerText = `${day}일 ${hours}시 ${minutes}분 ${seconds}초`;
}

setclocked();
setInterval(setclocked, 1000);

✳ 하나씩 살펴보자

 const setdate = new Date("2024-12-25T00:00:00");
 const newdate = new Date();

-> setdate 에 D-day 지정할 날짜를 적는다.

-> newdate 에 현재 날짜를 적는다. (Date() 인수에 아무것도 적지 않으면 현재 시간을 생성 해줌)

const distance = setdate - newdate;

-> 두 함수를 뺍니다.

💡 Date 함수로 생성한 Date 객체는 연산이 가능합니다.

const seconds = String(Math.floor((distance / 1000) % 60)).padStart(2, "0");   // 초
const minutes = String(Math.floor((distance / (1000 * 60)) % 60)).padStart(2, "0");  // 분
const hours = String(Math.floor((distance / (1000 * 60 * 60)) % 24)).padStart(2, "0");  // 시간
const day = String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, "0");  // 일

-> 1초는 1000미리 초 입니다. 초 단위에 1000으로 나눠주기

-> 모듈러(%) 연산을 사용해야 D-day 값을 구할 수 있다. 시간,분,초 단위에 맞춰 60, 24 로 나눠주자.

(설명하고 이해하기 복잡하다 이렇게 만들어 놓은 분들에게 감사하자 알면 다쳐 😂)

-> Math.floor 는 나누기 후 소수점을 없애기 위해 사용합니다.

-> padStart 를 사용해서 1,2,3 이 아닌 01,02,03 으로 만들어주기

-> "01","02","03" 문자열이 되므로 String 으로 바꿔줍니다.

clocked.innerText = `${day}일 ${hours}시 ${minutes}분 ${seconds}초`;

-> 앞에서 구한 변수들을 넣어 화면에 출력해 주기

저작자표시

후야

D-day 만들기

💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗

티스토리툴바