[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <clock.js>

2024. 12. 10. 20:56웹개발 포트폴리오

728x90
반응형
function getClock() {
  // 현재 시간을 가져와 시계를 업데이트하는 함수
    const clockElement = document.getElementById("clock");
    // HTML에서 id가 click인 요소를 가져온다
    if (!clockElement) return; // clockElement가 없으면 종료 (안전장치)
  
    const now = new Date();
    // Date 객체를 사용해 현재 시간을 가져온다
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");
    const seconds = String(now.getSeconds()).padStart(2, "0");
    // now.get'단위's를 사용해 시, 분, 초를 가져온다
    // String().padStart(2, "0") 숫자를 문자열로 변환하고, 2자리로 맞춘 뒤 빈 공간이 있으면 0을 넣는다
    clockElement.innerText = `${hours}:${minutes}:${seconds}`;
    // clockElement 요소의 텍스트를 설정한다
  }
  
  export function startClock() {
    getClock(); // 초기 실행
    setInterval(getClock, 1000); // 1초마다 실행
  }
728x90
반응형