1. HTML엔 h2 tag를 사용해 기본값 00:00:00 설정
2. JS에서 qureySelector or getElementBy~로 태그를 부른다.
3. 시계를 업데이트 하려면 interval(시간의 간격)을 사용해야 한다.
4. 이는 내장함수가 있다 : setInterval('실행하고자 하는 함수', '함수 호출 간격(ms)');
const clock = document.querySelector('#clock');
function sayHello() {
console.log('hello');
}
setInterval(sayHello, 5000);
5초마다 콘솔에 hello를 입력해 줄것 이다. (함수 실행 확인)
5. 시계를 표시하기 위해선 날짜함수를 이용해야한다.
이 또한 내장 함수 Date();
하지만 입력되도록 사용하기 위해서는 new Date(); > new 필요
+ .getDate(), .getDay(), .getHours(), .getfullYear().... 등 이 있다.
get은 반환, set은 대입의 역할, 예를들어
var dt = new Date('2010-12-25'); 일때
dt.getDate(); 는 25 를 반환
dt.setDate(13); 은 dt 객체를 2010년 12월 13일로 변경
출처: https://dororongju.tistory.com/116 [웹 개발 메모장:티스토리]
6. 이제 시간을 표시해 줄것 이니 함수의 이름을 getClock으로 변경
const clock = document.querySelector('#clock');
function getClock() {
const date = new Date();
clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
setInterval(getClock, 1000);
웹페이지가 새로고침 되고 1초 후 부터 시간이 새려지게 된다.
하지만, 숫자가 한자리가 되는 순간 01, 02, 03.. 이 아닌 1, 2, 3.. 으로 변환.
이를 바꾸기 위한 내장 함수 padStart();
'1'.padStart(2, '0'); => 1이라는 문자열의 길이가 2가 아니라면 앞에 0을 추가해준다.
'hello'.padStart(10, 'x'); => 문자열이 10이 될때 까지 앞에 x 추가 => 'xxxxxhello'
+ padEnd();도 있는데 이건 뒤에 추가해 주겠지?
*하지만, 이 함수는 string(문자열)에만 사용가능!
getDate()함수들을 보면 nmuber(숫자)이다. 그렇다면 string으로 변환해줘야 사용가능!
String([number])로 감싸주면 문자열로 변환 가능! 하지만, 너무 길어 지니 변수 할당
7. 홈페이지에 들어가 1초를 기다려야 시간이 바뀌는 것을 들어가자마자로 바꾸려면?
바로 실행되게 함수만을 먼저 실행 시킨다 => 현재 시간 표시
그리고 매초마다 함수가 실행 되도록 설정 => 매 1초마다 시간 새로 표시
const clock = document.querySelector('#clock');
function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
clock.innerText = (`${hours}:${minutes}:${seconds}`);
}
getClock();
setInterval(getClock, 1000);
8. 완료
9. 댓글을 보니 한번에 해결하는 방법도 있다고 한다. 나중에 사용해보기
mdn 잘 살펴보면 한번에 해결하는 방법도 있네요!
function sayHello(){
clock.innerText = new Date().toLocaleTimeString();
}
sayHello()
setInterval(sayHello, 1000);
-> 이 방법이 간결하고 깔끔한데, '13시'가 '1시 PM'으로 표현되는 형식이네요. 저도 이거랑 강의 버전 두 가지 다 적용해보다가 알게 되었습니다. 어떤 표현방식을 원하는지에 따라 쓰면 될 듯 합니다. (저는 알려주신 형식이 맘에 드네요 ㅎㅎ 감사합니다)
-> toLocaleTimeString() 메서드에 옵션 추가하시면 24시간 형식도 됩니다.
clock.innerText = new Date().toLocaleTimeString("en-US", { hour12: false });
