💪 D-day Counting: Until PTD release
😎 result
html
1000ms = 1s
1000ms60 = 60s = 1m
1000ms6060 = 1m60 = 60m = 1h
1000ms606024 = 1h24 = 24h = 1day
📌 % ざんりゅうえんざん
css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Until PTD Comeback</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<img src="ptd.png" />
<div class="text-box">
<div class="text-box__title">
<h1>PERMISSION TO DANCE</h1>
<span>2021. 7. 9. 13:00(KST)</span><span>RELEASE</span>
</div>
<div class="text-box__d-day-counting">
<h3>Until PTD release</h3>
<h4 class="clock"></h4>
</div>
</div>
</main>
<script src="index.js"></script>
</body>
</html>
JavaScriptconst clockTitle = document.querySelector(".clock");
function getClock() {
const comeback = new Date("2021-07-09T13:00:00+0900");
const now = new Date();
const untilComeback = comeback.getTime() - now.getTime();
console.log((untilComeback % (1000*60*60*24))/(1000*60*60));
const days = Math.floor(untilComeback / (1000*60*60*24));
const hours = String(Math.floor((untilComeback % (1000*60*60*24))/(1000*60*60))).padStart(2, "0");
const minutes = String(Math.floor((untilComeback % (1000*60*60))/(1000*60))).padStart(2, "0");
const seconds = String(Math.floor((untilComeback % (1000*60))/1000)).padStart(2, "0");
/*
String().padStart(2, "0"); 대신 위의 값 받아서 삼항 연산자로 앞에 String "0"추가하는 방법도 있음
const daysStr = `${days < 10 ? `0${days}` : days}d`;
const hoursStr = `${hours < 10 ? `0${hours}` : hours}h`;
const minutesStr = `${minutes < 10 ? `0${minutes}` : minutes}m `;
const secondsStr = `${seconds < 10 ? `0${seconds}` : seconds}s`;
*/
clockTitle.innerText = `${days}일 ${hours}시간 ${minutes}분 ${seconds}초 남았어요!`;
}
getClock();
setInterval(getClock, 1000);
📌 ミリ秒1000ms = 1s
1000ms60 = 60s = 1m
1000ms6060 = 1m60 = 60m = 1h
1000ms606024 = 1h24 = 24h = 1day
📌 % ざんりゅうえんざん
css
* {
margin: 0px;
padding: 0px;
}
body {
height: 100vh;
background-color: #ffe402;
display: flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
main {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.text-box {
margin-left: 50px;
display: flex;
flex-direction: column;
}
.text-box__title h1 {
font-size: 40px;
}
.text-box__title span {
font-size: 25px;
font-weight: 600;
}
.text-box__title span:last-child {
font-weight: 200;
margin-left: 10px;
}
.text-box__d-day-counting {
margin: 20px 0;
border-top: 1px solid black;
padding-top: 20px;
}
h4 {
font-size: 18px;
font-weight: 400;
}
Reference
この問題について(💪 D-day Counting: Until PTD release), 我々は、より多くの情報をここで見つけました https://velog.io/@summereuna/D-day-Counting-Until-PTD-releaseテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol