<!DOCTYPE html>
<html>
<head>
<title>디데이 계산</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>2020년 크리스마스 Dday !!</h1>
<div id="clock">
<h2>00:00</h2>
</div>
<script src="index.js"></script>
</body>
</html>
const clockBox = document.querySelector("#clock");
const clock = clockBox.querySelector("h2");
setInterval(function getTime() {
// Don't delete this.
const cristxmasDay = new Date("2020-12-24:00:00:00+0900");
const nowDay = new Date();
const gap = cristxmasDay - nowDay
const day = Math.floor(gap / (1000 * 60 * 60 * 24)); //일
const hours = Math.floor((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //분
const minute = Math.floor((gap % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((gap % (1000 * 60)) / 1000);
clock.innerText = `${day}일 ${hours < 10 ? `0${hours}` : hours}시 ${minute < 10 ? `0${minute}` : minute}분 ${
seconds < 10 ? `0${seconds}` : seconds}초`
},1000);
삼항 연산자https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
setInterval
https://developer.mozilla.org/ko/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
date
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
Template literals
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
'JS > Javascript' 카테고리의 다른 글
| 현재 위치 위도 경도 표시하기 (Javascript) (0) | 2020.09.06 |
|---|---|
| 진수 변환하기 toString (JavaScript) (0) | 2020.08.07 |
| Array.fill() 정리 (JavaScript) (0) | 2020.08.06 |
| Array.from() 정리 (JavaScript) (0) | 2020.08.06 |
| const 변수 정리(JavaScript) (0) | 2020.08.06 |