JavaScript 실시간 시계 - 소스 코드 제공

JavaScript 실시간 시계 - 소스 코드 제공

 

 

이번 글에서는 HTML, CSS, 그리고 JavaScript를 활용하여 디지털 시계를 만드는 방법을 알아보겠습니다. 디지털 시계는 웹 페이지에 실시간 시간을 표시하는 간단한 예제로, 웹 개발에 입문하는 데 도움이 될 것입니다.

 

 

HTML 구조

 

javascript 변수 선언 방법 3가지 특징, 비교 (var, let, const)

 

HTML과 CSS는 디지털 시계를 웹 페이지에 그리는 데 사용됩니다. HTML은 페이지의 구조를 정의하고 CSS는 디자인을 스타일링하는 데 사용됩니다.

 

<div id="parent">
  <div id="timeDisplay">
  </div>
</div>

 

여기서는 간단한 구조로 HTML을 시작하고, CSS 스타일링을 나중에 추가할 것입니다.

 

 

디지털 시계 디자인

 

javascript 배열 안 숫자 중 최대값 찾는 다양한 방법 - 알고리즘 풀이

 

    #parent {
        border: 2px solid rgb(0, 0, 0);
        margin: 10px auto auto 10px;
        padding: 10px auto 10px auto;
        text-align: center;
    }
      
    #timeDisplay{
        display: inline-block;
        vertical-align: middle;
        color: rgb(0, 0, 0);
        font-size: 30px;
    }

 

디지털 시계 디자인을 위해 CSS를 사용합니다. 시계를 감싸는 #parent 요소와 시간을 표시할 #timeDisplay 요소를 스타일링합니다.

 

#parent는 테두리와 여백을 설정하고, #timeDisplay는 텍스트의 스타일을 지정합니다.

 

 

JavaScript로 시간 표시하기

 

JavaScript를 사용하여 실시간 시간을 업데이트하고 #timeDisplay에 표시합니다. 아래는 디지털 시계 함수의 동작 원리입니다.

 

    // 디지털 시계 함수 동작
    showTime();

    function showTime(){
            var date = new Date();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var session = "AM";
            
            if(hour == 0){
            hour = 12;
            }
        
            if(hour > 12){
            hour = hour - 12;
            session = "PM";
            }
        
            hour = (hour < 10) ? "0" + hour : hour;
            minute = (minute < 10) ? "0" + minute : minute;
            second = (second < 10) ? "0" + second : second;
        
            var time = hour + ":" + minute + ":" + second + " " + session;
            document.getElementById("timeDisplay").innerText = time;
            document.getElementById("timeDisplay").textContent = time;
            document.getElementById("timeDisplay").style.fontSize = "25px";
            setTimeout(showTime, 1000);
    }

 

위 코드에서 showTime 함수는 현재 시간을 가져와서 AM 또는 PM으로 구분하며, 시간, 분, 초를 표시합니다. setInterval을 사용하여 1초마다 시간을 업데이트합니다.

 

 

전체 코드 및 동작 확인

 

See the Pen Untitled by 다한 (@ukskzyxv-the-bashful) on CodePen.

 

 

끝으로

 

이 글에서는 HTML, CSS 및 JavaScript를 사용하여 간단한 디지털 시계를 만드는 방법을 살펴보았습니다. 이 예제는 웹 개발을 시작하는 데 좋은 출발점이며, HTML, CSS 및 JavaScript를 사용하여 실제로 작동하는 웹 기능을 구현하는 방법을 배울 수 있습니다. 이를 통해 기본적인 웹 개발 스킬을 향상시킬 수 있을 것입니다.

 

▼ 아래 글도 읽어보세요! ▼

 

javascript 문법 과제 숫자 맞추기 게임

 

Git Graph로 Git 저장소 시각화하기 - VSCode 내 설치법, 사용법

 

내일배움캠프 공부법 특강 - 개발자가 되기 위한 공부 방식, 태도 소개