div와 h1, h2를 id가 아닌 class로 하니 이상하게 querySelector로 불러와서 style을 지정하는게 되질 않았다.
해결 과정에서 얻은지식
div의 배치
querySelector가 아닌 getElementById로 class가 아닌 id를 사용하니 훨씬 수월해졌다. 이후 코드로 살펴보자.
JavaScript[JS]
const clock = document.getElementById("clock");
const clockText = document.getElementById("clockText");
const clockDiv = document.getElementById("clockDiv");
clockText.style.fontSize = "60px";
clock.style.fontSize = "45px";
clockDiv.style.position = "absolute";
clockDiv.style.top = "40%";
clockDiv.style.left = "20%";
function getClock(){
const date = new Date();
const year = String(date.getFullYear());
const a = year + "-" + "12-25";
const Cdate = new Date(a);
const Ctime = Cdate.getTime();
const Dtime = date.getTime();
let time = Math.floor((Ctime - Dtime) / 1000);
const dates = Math.floor(Math.abs(time / (60*60*24)));
time = time - dates * (60*60*24);
const hours = Math.floor(Math.abs(time / (60*60)));
time = time - hours * (60 * 60);
const minutes = String(Math.floor(Math.abs(time / (60)))).padStart(2,"0");
time = time - minutes * 60;
const seconds = String(Math.floor(Math.abs(time))).padStart(2,"0");
clock.innerText = `${dates}일 ${hours}시간 ${minutes}분 ${seconds}초 남았습니다.`;
}
getClock();
setInterval(getClock, 1000);
헤맨 부분
날짜를 계산하는 것.
querySelector와 getElementById의 차이
해결 과정에서 얻은지식
날짜 getTime() 1970년 1월 1일을 기준으로 현재까지의 시간을 milliseconds의 단위로 가져옴 const date = new Date("원하는 날짜"); 생성할 때, 원하는 날짜를 넣지 않으면 default로 현재의 날짜를 가져오지만, 원하는 날짜가 있을 땐 생성할 때, 저런 식으로 넣어주면 된다. 두 날짜의 차이를 구하는 방식 -먼저, 원하는 날짜 둘을 date1, date2로 생성을 하고, getTime()으로 시간을 구해 빼준다. -뺀 시간을 년, 날, 시, 분, 초의 단위로 나누면 되는데, 나누는 방법은 1000(밀리초) * 60(초) * 60(분) * 24(시간) * 365(년)이다. 초를 원한다면 1000 * 60 분을 원한다면 1000 * 60 * 60 시간을 원한다면 1000 * 60 * 60 * 24 년을 원한다면 1000 * 60 * 60 * 24 * 365
id와 class의 차이 id는 특정한 대상만을 가르키는 반면, class는 재사용이 가능하다.
getElementById("id").style.*를 통해 css에서 할 수 있는 것들을 js에서도 할 수 있게 해준다.
setInterval(funtion, num(ms)) 와 setTimeout(function, num(ms))의 차이를 안다.
앞으로 해결해야할 의문
querySelector 와 getElementById의 차이를 조금 더 명확하게 알도록 하자.
