본문 바로가기

HTML 예제

날짜 및 시간 표시

반응형

날짜 및 시간을 표시하는 간단한 HTML 코드를 제공합니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.


<!DOCTYPE html>
<html>
<head>
    <title>날짜 및 시간 표시</title>
</head>
<body>
    <h1>현재 날짜와 시간</h1>

    <!-- 날짜 및 시간 표시 영역 -->
    <p>현재 날짜: <span id="currentDate"></span></p>
    <p>현재 시간: <span id="currentTime"></span></p>

    <script>
        // 현재 날짜와 시간 표시 함수
        function displayDateTime() {
            var currentDateElement = document.getElementById("currentDate");
            var currentTimeElement = document.getElementById("currentTime");
            
            var now = new Date();
            var dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
            var timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
            
            currentDateElement.textContent = now.toLocaleDateString(undefined, dateOptions);
            currentTimeElement.textContent = now.toLocaleTimeString(undefined, timeOptions);
        }

        // 페이지 로드 시 현재 날짜와 시간 표시
        window.onload = displayDateTime;
    </script>
</body>
</html>

반응형

'HTML 예제' 카테고리의 다른 글

화면 크기에 따른 반응형 디자인  (0) 2023.12.07
간단한 게시판 형식  (0) 2023.12.07
다크 모드 토글  (0) 2023.12.07
사용자 위치 표시  (0) 2023.12.07
동적으로 목록 추가  (0) 2023.12.07