HTML, CSS 및 JavaScript를 사용하여 디지털 시계를 만드는 방법

디지털 시계는 JavaScript에서 최고의 초보자 프로젝트 중 하나입니다. 모든 기술 수준의 사람들이 배우기 매우 쉽습니다.

이 기사에서는 HTML, CSS 및 JavaScript를 사용하여 자신만의 디지털 시계를 만드는 방법을 배웁니다. 변수 생성, 함수 사용, 날짜 작업, DOM에 속성 액세스 및 추가 등과 같은 다양한 JavaScript 개념에 대한 실습 경험을 얻을 수 있습니다.

Windows에서 이 네트워크의 프록시를 감지할 수 없습니다.

시작하자.

디지털 시계의 구성 요소

디지털 시계는 시, 분, 초 및 자오의 네 부분으로 구성됩니다.

디지털 시계 프로젝트의 폴더 구조

HTML, CSS 및 JavaScript 파일이 포함된 루트 폴더를 만듭니다. 파일 이름은 원하는 대로 지정할 수 있습니다. 여기서 루트 폴더의 이름은 디지털 시계 . 표준 명명 규칙에 따라 HTML, CSS 및 JavaScript 파일의 이름은 index.html , 스타일.css , 그리고 스크립트.js 각기.

HTML을 사용하여 디지털 시계에 구조 추가

열기 index.html 파일을 만들고 다음 코드를 붙여넣습니다.

  
  
  
  
 Digital Clock Using JavaScript

여기에 div 로 생성된다 ID NS 디지털 시계 . 이 div는 JavaScript를 사용하여 디지털 시계를 표시하는 데 사용됩니다. 스타일.css 외부 CSS 페이지이며 다음을 사용하여 HTML 페이지에 연결됩니다. 꼬리표. 비슷하게, 스크립트.js 외부 JS 페이지이며 다음을 사용하여 HTML 페이지에 연결됩니다. < 스크립트> 꼬리표.

JavaScript를 사용하여 디지털 시계에 기능 추가

열기 스크립트.js 파일을 만들고 다음 코드를 붙여넣습니다.

function Time() {  
 // Creating object of the Date class  
 var date = new Date();  
 // Get current hour  
 var hour = date.getHours();  
 // Get current minute  
 var minute = date.getMinutes();  
 // Get current second  
 var second = date.getSeconds();  
 // Variable to store AM / PM  
 var period = '';  
 // Assigning AM / PM according to the current hour  
 if (hour >= 12) {  
 period = 'PM';  
 } else {  
 period = 'AM';  
 }  
 // Converting the hour in 12-hour format  
 if (hour == 0) {  
 hour = 12;  
 } else {  
 if (hour > 12) {  
 hour = hour - 12;  
 }  
 }  
 // Updating hour, minute, and second  
 // if they are less than 10  
 hour = update(hour);  
 minute = update(minute);  
 second = update(second);  
 // Adding time elements to the div  
 document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;  
 // Set Timer to 1 sec (1000 ms)  
 setTimeout(Time, 1000);  
}  
 // Function to update time elements if they are less than 10  
 // Append 0 before time elements if they are less than 10  
function update(t) {  
 if (t <10) {  
 return '0' + t;  
 }  
 else {  
 return t;  
 }  
}  
Time();

자바스크립트 코드 이해하기

NS 시간() 그리고 업데이트() 기능은 디지털 시계에 기능을 추가하는 데 사용됩니다.

현재 시간 요소 가져오기

현재 날짜와 시간을 얻으려면 Date 객체를 생성해야 합니다. JavaScript에서 Date 객체를 생성하기 위한 구문은 다음과 같습니다.

var date = new Date();

현재 날짜와 시간이 저장됩니다. 데이트 변하기 쉬운. 이제 날짜 개체에서 현재 시, 분, 초를 추출해야 합니다.

date.getHours() , 날짜.getMinutes(), 그리고 date.getSeconds() 날짜 개체에서 각각 현재 시, 분, 초를 가져오는 데 사용됩니다. 모든 시간 요소는 추가 작업을 위해 별도의 변수에 저장됩니다.

var hour = date.getHours();  
var minute = date.getMinutes();  
var second = date.getSeconds();

현재 정오 지정(AM/PM)

디지털 시계는 12시간제이므로 현재 시간에 따라 적절한 자오선을 할당해야 합니다. 현재 시간이 12보다 크거나 같으면 자오선은 PM(Post Meridiem)이고, 그렇지 않으면 AM(Ante Meridiem)입니다.

var period = '';  
if (hour >= 12) {  
 period = 'PM';  
} else {  
 period = 'AM';  
}

현재 시간을 12시간 형식으로 변환

이제 현재 시간을 12시간 형식으로 변환해야 합니다. 현재 시간이 0이면 현재 시간이 12로 업데이트됩니다(12시간 형식에 따라). 또한 현재 시간이 12보다 크면 12시간 형식과 일치하도록 12로 줄어듭니다.

if (hour == 0) {  
 hour = 12;  
} else {  
 if (hour > 12) {  
 hour = hour - 12;  
 }  
}

시간 요소 업데이트

시간 요소가 10(한 자리) 미만인 경우 업데이트해야 합니다. 모든 한 자리 시간 요소(시, 분, 초)에 0이 추가됩니다.

hour = update(hour);  
minute = update(minute);  
second = update(second);  
function update(t) {  
 if (t <10) {  
 return '0' + t;  
 }  
 else {  
 return t;  
 }  
}

DOM에 시간 요소 추가하기

먼저 대상 div의 id( 디지털 시계 ). 그런 다음 시간 요소는 다음을 사용하여 div에 할당됩니다. 내부텍스트 세터.

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

매초 시계 업데이트

시계는 다음을 사용하여 매초 업데이트됩니다. setTimeout() 자바스크립트의 메소드.

setTimeout(Time, 1000);

CSS를 사용하여 디지털 시계 스타일 지정

열기 스타일.css 파일을 만들고 다음 코드를 붙여넣습니다.

관련된: CSS box-shadow 사용 방법: 요령과 예

/* Importing Open Sans Condensed Google font */  
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');  
  
#digital-clock {  
 background-color: #66ffff;  
 width: 35%;  
 margin: auto;  
 padding-top: 50px;  
 padding-bottom: 50px;  
 font-family: 'Open Sans Condensed', sans-serif;  
 font-size: 64px;  
 text-align: center;  
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
}

위의 CSS는 디지털 시계의 스타일을 지정하는 데 사용됩니다. 여기에서 Open Sans Condensed 글꼴은 시계 텍스트를 표시하는 데 사용됩니다. 다음을 사용하여 Google 글꼴에서 가져옵니다. @수입 . NS #디지털 시계 id 선택기는 대상 div를 선택하는 데 사용됩니다. id 선택자는 다음을 사용합니다. ID 특정 요소를 선택하기 위한 HTML 요소의 속성.

관련된: 10분 안에 배울 수 있는 간단한 CSS 코드 예제

이 기사에 사용된 전체 소스 코드를 보려면 여기를 참조하십시오. GitHub 저장소 . 또한, 이 프로젝트의 라이브 버전을 보고 싶다면 다음을 통해 확인할 수 있습니다. GitHub 페이지 .

메모 : 이 글에서 사용한 코드는 MIT 라이센스 .

다른 JavaScript 프로젝트 개발

JavaScript 초보자이고 훌륭한 웹 개발자가 되고 싶다면 좋은 JavaScript 기반 프로젝트를 빌드해야 합니다. 그들은 이력서와 경력에 가치를 더할 수 있습니다.

Calculator, Hangman 게임, Tic Tac Toe, JavaScript 날씨 앱, 대화형 랜딩 페이지, Weight Conversion Tool, Rock Paper Scissors 등과 같은 일부 프로젝트를 시도할 수 있습니다.

Windows 7에서 인터넷 속도를 높이는 방법

다음 JavaScript 기반 프로젝트를 찾고 있다면 간단한 계산기가 탁월한 선택입니다.

공유하다 공유하다 트위터 이메일 HTML, CSS 및 JavaScript를 사용하여 간단한 계산기를 만드는 방법

단순하고 계산된 코드는 프로그래밍할 때 사용하는 방법입니다. HTML, CSS 및 JS로 자신만의 계산기를 구축하는 방법을 확인하십시오.

다음 읽기 관련 항목

워드프레스 및 웹 개발
프로그램 작성
HTML
웹 개발
자바스크립트
CSS

저자 소개 유브라지 찬드라(60편 게재)

Yuvraj는 인도 델리 대학교의 컴퓨터 공학 학부생입니다. 그는 풀 스택 웹 개발에 열정적입니다. 그는 글을 쓰지 않을 때 다양한 기술의 깊이를 탐구하고 있습니다.

유브라지 찬드라가 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.