Date 객체를 이용한 디데이
15 Oct 2021 -
Less than 1 minute read
Date 객체를 이용해 크리스마스 디데이 만들기
See the Pen 디데이 by Jinsol (@losuif) on CodePen.
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>크리스마스 디데이</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<div id="resArea"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
#wrap {
width: 320px;
padding: 20px;
margin: 20px auto;
background-color: #fc493d;
border: 5px dashed #21BF73;
}
#resArea {
text-align: center;
font-size: 30px;
font-weight: bold;
color: #FDFCE5;
}
JavaScript
let xmas = new Date(2021, 11, 25);
// 월은 0부터 시작
let now = new Date();
// 인수 없으면 현재를 의미
xmas = xmas.getTime();
now = now.getTime();
// => 절대시간
let timeData = xmas - now;
let resDate = Math.floor(timeData / 24 / 60 / 60 / 1000);
document.getElementById("resArea").innerText
= "🎄 Christmas D-" + resDate + " 🎄";