[팀 포트폴리오] [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
반응형
'웹개발 포트폴리오' 카테고리의 다른 글
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <FocusMode.jsx & FocusMode.css> (0) | 2024.12.11 |
---|---|
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <background.JSX> (0) | 2024.12.11 |
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <greeting.js> (0) | 2024.12.10 |
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <quotes.js> (0) | 2024.12.10 |
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <weather.js> (0) | 2024.12.10 |