JavaScript 실시간 시계 - 소스 코드 제공
이번 글에서는 HTML, CSS, 그리고 JavaScript를 활용하여 디지털 시계를 만드는 방법을 알아보겠습니다. 디지털 시계는 웹 페이지에 실시간 시간을 표시하는 간단한 예제로, 웹 개발에 입문하는 데 도움이 될 것입니다.
HTML 구조
HTML과 CSS는 디지털 시계를 웹 페이지에 그리는 데 사용됩니다. HTML은 페이지의 구조를 정의하고 CSS는 디자인을 스타일링하는 데 사용됩니다.
<div id="parent">
<div id="timeDisplay">
</div>
</div>
여기서는 간단한 구조로 HTML을 시작하고, CSS 스타일링을 나중에 추가할 것입니다.
디지털 시계 디자인
#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를 사용하여 실제로 작동하는 웹 기능을 구현하는 방법을 배울 수 있습니다. 이를 통해 기본적인 웹 개발 스킬을 향상시킬 수 있을 것입니다.
▼ 아래 글도 읽어보세요! ▼
'Programming & Platform > JavaScript' 카테고리의 다른 글
javascript와 spring의 개념, 특징, 장점, 비교 및 앞으로의 전망 (1) | 2023.10.23 |
---|---|
JavaScript 전역변수와 지역변수의 소개, 특징, 차이점, 예시 코드 (0) | 2023.10.22 |
javascript 변수 선언 방법 3가지 특징, 비교 (var, let, const) (1) | 2023.10.19 |
JavaScript Uncaught TypeError: Cannot read properties of null (0) | 2023.10.18 |
javascript 문법 과제 숫자 맞추기 게임 (1) | 2023.10.17 |