나의 발자취
바닐라 JS 챌린지:: 10일차 본문
오늘은 시계를 만드는 수업이다. 어제의 경우 랜덤게임을 했는데.. 제일 마지막 부분 머신===나 일치 시 you won! 이것이 안됐다. 휴
setInterval()
setTimeout()
getDay()
getClock()
setInterval(getClock,1000); // 시간마다 반복하면서 실행
setTimeout(sayHello,5000); // 시간만큼 기다렸다가 실행
// console에 new Date(); 라고 치면 나온다.
// date.getDay()
// date.getFullYear()
// date.getHours()
// date.getMinutes()
// date.getSeconds()
string을 문자 두개로 채우는 법
padStart() :str에 넣을 수 있는 function
ex.
"1".padStart(2,"0")을 하면 길이를 두 자리로 하고, 앞을 0으로 채워달라고 하는 것으로 "01"이라는 결과가 나온다.
padEnd() 도 있다.
오늘의 과제는 아래와 같이 크리스마스 이브..가 아닌 크리스마스의 디데이 카운트를 하는 시계를 만드는 것이다!
저번 챌린지에 비해 정말 빨리..10분만에 끝났다.
// index.js
const clockTitle = document.querySelector(".js-clock");
const clock = setInterval(function () {
const xmas = new Date("December 25 2021 00:00:00 GMT+0900").getTime();
const now = new Date().getTime();
const distance = xmas - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
clockTitle.innerText=`${days}d ${hours}h ${minutes}m ${seconds}s`;
if (distance < 0) {
clearInterval(clock);
clockTitle.innerText=`IT'S D-DAY!!`
}
}, 1000);
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Time Until Christmas</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Time Until Christmas</h1>
<h2 class="js-clock"></h2>
<script src="index.js"></script>
</body>
</html>body{
font-family:sans-serif;
}
Comments