본문 바로가기
Programming & Platform/JavaScript

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

by 코드스니펫 2023. 10. 21.
반응형

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

 

javascript logo

 

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

 

 

HTML 구조

 

 

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

javascript 변수 선언 방법 3가지 특징, 비교 (var, let, const) 자바스크립트에서 변수를 선언하는 방법은 크게 세 가지가 있습니다. var, let, 그리고 const. 이들 각각의 특징과 사용법에 대해 알아보겠습

lemonlog.tistory.com

 

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

 

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

 

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

 

 

디지털 시계 디자인

 

 

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

javascript 배열 안 숫자 중 최대값 찾는 다양한 방법 - 알고리즘 풀이 숫자로 이루어진 배열 안의 최대값을 찾는 방법에 대해 필자가 해결한 방법과 그 외의 다양한 해결 방법에 대해 소개하겠습니

lemonlog.tistory.com

 

    #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 문법 과제 숫자 맞추기 게임

javascript 문법 과제 숫자 맞추기 게임 5주차의 javascript 문법 강의를 마치고 마지막 숙제로 숫자 맞추기 게임 구현이 주어졌습니다. 그동안 배운 문법들을 활용하여 아래와 같이 구현하였습니다.

lemonlog.tistory.com

 

 

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

Git Graph로 Git 저장소 시각화하기 - VSCode 내 설치법, 사용법 Git은 현대적인 버전 관리 시스템으로, 프로젝트의 변경 내역을 체계적으로 관리하고 협업을 용이하게 합니다. Git 그래프는 Git 저장소

lemonlog.tistory.com

 

 

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

내일배움캠프 공부법 특강 - 개발자가 되기 위한 공부 방식, 태도 소개 (최양임 매니저님 강의) 내일배움캠프 중 공부법 특강을 듣고 나서 강의 정리한 내용과 소감에 대해 작성하였습니다. 4개

lemonlog.tistory.com