Clock

자바스크립트 시계

2022.07.11

생각정리

• 시간, 분, 초, AM 설정해야함
• 12시간으로 해야함 / AM PM 바뀌게 해야함
• 시간 흐르게...
• 이걸 HTMl에 안넣고 화면에 어떻게 나오게하지...

코드

function showTime() {
    let time= new Date();
    let hour= time.getHours();
    let minute= time.getMinutes();
    let second= time.getSeconds();
    let set= "AM";

    if (hour > 12) {
        set= "pm";
        hour= hour - 12;
    }

    hour= (hour < 10) ? "0" + hour : hour;
    minute= (minute < 10) ? "0" + minute : minute;
    second= (second < 10) ? "0" + second : second;

    let clock = hour +":" + minute+ ":" + second + " " + set;
    document.querySelector(".clock").innerText= clock;
    document.querySelector(".clock").textContent= clock;

    setTimeout(showTime, 1000);
    
}

showTime();

머리터짐! (해결됨)

• 대체 HTML에 안넣고 어떻게 화면에 나오게 하는거지 머리터졌는데 생각보다 쉬웠어 아직 완벽히 이해는 못했지만서도.. innerText 써서 하는건 해설보고 이거 쓰면 되겠구나 했는데 querySelector랑 innerText를 이어붙이는것도 생각못했고, = 변수넣을것도 생각못했어...

• 24시간말고 12시간으로 하는거 대체 어떻게 하는건가 엄청 고민했는데 그냥 -12하면 된다니 좀 충격이야...

• if (hour < 10) {hour= "0" + hour;} 이렇게 했었는데 ? : 이게 있었네...다들 천재네...나만 바본가...

• const로 해놓고 계속 변수를 바꾸고 앉아있으니 안되지 바보야...정신차려

• 시간이 가야되는데 계속 새로고침을 해야 시간이 바껴서 대체 뭐지 어떡해야되는거야 하고 완전 골머리 터졌다
  setTimout으로 설정해서 1초에 한번씩 계속 반복하게 해주는것같은데 나는 계속 앞에 시간,분,초 앞에 0만 계속 늘어나서 진짜 뭐지 싶었다
  그 hour < 10 ~~ 이부분이 왠지 모르겠지만 계속 반복됐다. 진짜 머리터지는 줄 알았는데 변수선언 위치때문이었어...
  변수를 clock제외하고 다 전역변수로 선언했었는데 알아보니까 전역변수랑 지역변수에서 똑같이 선언하면 지역변수에서 선언한게 우선시된대...그러니까 내 생각엔 자꾸 시간업데이트를 안하고 hour= (hour < 10) ? "0"+ hour : hour; 이 부분이 계속 먼저 호출되면서 그런것같아...근데 확실하진않다...누가 좀 알려줬으면... + 전역변수로 하면 가끔 여러가지 문제가 생긴다고 꼭 전역변수로 해야되는거 아니면 가급적 자제하는게 좋대...

의문!

• document.querySelector(".clock").textContent= clock;
  이건 왜넣는걸까? 안넣어도 구현되던데

• 왜 해설에서는 계속 id로 설정할까...

메모

new Date
getHours
innerText
textContent
onload

css -> transform / translate / font-family / letter-spacing