IT/JavaScript

간단한 시계 만들기

Tommy 2022. 11. 16. 08:53
728x90

 

* index.html

-> h2 태그 안에 innerText로 시계를 넣을 예정

-> clock.js 파일 import

* clock.js

-> 1번 라인 : clock 변수에 index.html 에 있는 h2 태그 중 id가 "clock"인 것을 지정

-> function getClock() : 시계 처리 함수

--> const hours, minutes, seconds  각 시간/분/초를 가져오는 부분

--> .padStart(2, "0") : 시계 내용 출력 시 10 이하는 "1, 2, 3 ..." 으로 나오는 부분을 "01, 02, 03 ..." 으로 변환

      padStart(최소입력자리수, "앞에 추가 입력할 String");

--> getClock(); 처음 실행 시 안 보이는 것을 방지 / html 시작하자마자 시계 출력

--: setInterval(getClock, 1000); --> 1000ms (1초) 마다 getClock()  함수를 호출 --> 매 초마다  갱신하여 시계가 실시간으로 

                                                      동작하는 것으로 보임