// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중//
시계를 만드는 방법은 수십 가지이고(어쩌면 수백일지도),
개인마다 다르게 코드를 짠다.
강의를 바탕으로, 매초 변화하는 "00:00:00"형태를 만들었다. (이미 10 미만은 앞에 0이 붙도록)
아무래도 읽기 편하려면
1. "13시"보다는 "1시"가 직관적이기에 12가 넘어가면 자연스럽게 "01"로 바뀌는 것,
2. a.m.과 p.m. 을 넣는 것을
어떻게 구현할지 고민했다.
new Date() 가 어떤 함수인지는 아직 모르겠지만,
뭐.. 돌아가면 된 거니까.
외워서 바로 짜지는 못하더라도,
찾아서 응용하는 것이 코딩에 핵심이기에 이 정도로 만족한다.
이전 강의에서 ``(백 틱)으로 string을 쓰면 더 편하다고 설명했었는데,
따로 더 활용을 안 해봐서 사용법을 익힐 수 있어서 좋았다.
특히,,, 나란히 string 표시를 할 때 "," 인지 "&&"인지 알 수가 없어서 헤매다가 그냥 " " 띄었으면 된다는 것도 깨달았다.
+ 백틱을 쓰고 싶으면 영문에서 opt + ~/₩
am과 pm을 const로 따로 지정한 경우들이 꽤 있었는데,
처음에는 그렇게 만들었으나, 어차피 string으로 붙이는 거면 필요 없을 것 같아서 뺐다.
+ 이 둘은 문법상 시간 뒤에 오고 맞는 표현은 "a(p).m."이라는 것도 알게 됐다.
시간을 12보다 적게 나타나도록 쓰는 것은 고민을 꽤 했다.
각각에 대치 되게 (예, if( hours === 12)) 이런 식으로 만드는 경우도 있었고,
계산식을 활용하는 등 다양한 예제들을 확인했다.
나는 그냥 시간 - 12를 기준으로 하여 새로운 변수를 만드는 경우를 참고했다.
시간에 대한 객체 안에 2가지 기준을 동시에 넣으려면 어떻게 할 수 있을까를 고민하면서, "&&"도 써보고 ","도 써본 건데
코드는 위에서부터 순서대로 실행됨을 까먹은 행태였다.
다른 분의 코드를 참고하니, 먼저 적용될 것 두고 바로 그 값에 > 로 하셔서 그렇게 해보니 되었다...
hours로 할지 setHours가 맞는지 고민했지만,
지금껏 잘 돌아가니 문제는 없을 듯싶다.
<HTML>
<body>
<div class="js-clock">
<h1>00:00:00</h1>
</div>
<script src="JS/clock.js"></script>
</body>
<JS>
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
const setHours = date.getHours() - 12;
clockTitle.innerText = `${
hours < 10 ? `0${hours}` : hours > 12 ? `0${setHours}` : hours
}:${minutes < 10 ? `0${minutes}` : minutes}:${
seconds < 10 ? `0${seconds}` : seconds
} ${hours < 12 ? `a.m.` : `p.m.`}`;
}
function init() {
getTime();
setInterval(getTime, 1000);
}
init();
p.s 정오가 조금,, 궁금하긴 한데,, 이것 참 기다렸다가 볼 수도 없고...
+ setInterval(fn, 1000)이라는 좋은 함수를 배웠다.
fn: 함수
1000: 실행할 시간 간격이 오면 된다. (milieseconds(1/1000초)가 기준)
+ console.clear() --> 말 그대로 콘솔 창 깨끗이.
'Web Developing > JS' 카테고리의 다른 글
| [JS] background image 변경하기 (0) | 2024.03.16 |
|---|---|
| [JS] to-do list 만들기 (1) | 2024.03.16 |
| [JS] form 만들고 저장하기 (사용자 이름 기억하게 하기) (2) | 2024.03.16 |
| [JS] classList를 써서 methods를 활용, 특히 toggle (0) | 2024.03.16 |
| [JS] JS or CSS가 웹페이지에 적용이 안 될 때 (0) | 2024.03.16 |