[DOM]JavaScript로 실시간 시계 만들기

주제

실시간 시계를 웹 페이지에 추가하는 것은 많은 웹 개발자들이 관심을 가지는 주제 중 하나입니다. 이 글에서는 JavaScript를 사용하여 실시간 시계를 만드는 예제를 소개하겠습니다

시계 요소 선택

먼저, 시계를 표시할 HTML 요소를 선택해야 합니다. 아래의 코드는 #clock ID 시계를 표시할<div> 요소를 선택합니다.

let clock = document.querySelector("#clock");

시간 업데이트

JavaScript의 setInterval 함수를 사용하면 일정한 간격으로 코드를 반복 실행할 수 있습니다, 아래의 코드는 1초마다 현재시간을 가져와서 #clock 요소에 표시합니다.

setInterval(function () {
    let now = new Date();
    clock.innerHTML = now;
}, 1000);

이러한 방식으로 JavaScript를 사용하여 실시간 시계를 만들 수 있으며, 웹페이지에 실시간 정보를 표시하는 데 유용하게 활용할 수 있습니다.