728x90
반응형
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DAY5</title>
</head>
<body>
<h1>2021년 크리스마스까지 남은 시간은?</h1>
<h2 class="dday">00</h2>
<script src="./src/index.js"></script>
</body>
</html>
자바스크립트
const dday= document.querySelector(".dday");
function getTime(){
const now = new Date();
const xMas = new Date("2021-12-25:00:00:00+0900");
console.log(xMas);
const timeRemaining = xMas.getTime() - now.getTime();
const day = Math.floor(timeRemaining/(24*60*60*1000));
const hour = Math.floor((timeRemaining/(60*60*1000))%24);
const min = Math.floor((timeRemaining/(60*1000))%60);
const sec = Math.floor((timeRemaining/1000)%60);
dday.innerHTML = `${day}d ${hour}h ${min}m ${sec}s`;
}
/*
function init(){
setInterval(function(){
getTime()
},1000);
}
*/
//위에랑 같은 표현이긴 한데 이렇게 써도 가능
function init(){
setInterval(getTime,1000);
}
init();
※ 포인트는 timeRemaining에서 일 시간 분 초로 바꿀 때 어떻게 계산하는지!!
728x90
반응형
'Coding With Jina > JavaScript' 카테고리의 다른 글
| [자바스크립트] select를 이용해 저장한 value값 로컬스토리지 출력하기 (0) | 2021.01.16 |
|---|---|
| [자바스크립트] 로컬 스토리지(LocalStorage) / 세션 스토리지(SessionStorage) (0) | 2021.01.16 |
| [자바스크립트] classList.add/remove/contains / toggle (0) | 2021.01.14 |
| [자바스크립트] 자바스크립트로 CSS 변경하기 - classList 이용 (0) | 2021.01.14 |
| [자바스크립트] init()함수는 왜 사용할까? (0) | 2021.01.14 |