자바스크립트 디지털 시계 만들기

티스토리 뷰

IT/프로그래밍

자바스크립트 디지털 시계 만들기

탐구소년 2021. 4. 10. 21:35

안녕하세요. 이번 포스팅에서는 자바스크립트(라이브러리 미사용)를 이용해 디지털 시계 구현하는 방법에 대해 정리해보도록 하겠습니다. 자바스크립트를 막 공부하기 시작한 초보자들에게 적합한 소규모 프로젝트 성격의 예제입니다.

목표

웹페이지에 위와 같은 모습의 단순한 시계를 표시할 것입니다. 처음 페이지가 열렸을 때는 페이지가 열린 시점의 시간이 표시되고 시계가 멈춰있습니다. 그러다 GO 버튼을 누르면 GO 버튼을 누른 시점에서부터 시간이 흐르기 시작합니다. 그러다 STOP 버튼을 누르면 다시 시계가 멈춥니다.

코드

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0">
  <title>디지털 시계 만들기</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="clock">
      <h1 id="time"></h1>
    </div>
    <button id="stop">STOP</button>
    <button id="go">GO</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

12 : 클래스가 clock인 div 요소가 실제 시계 역할을 담당할 요소입니다.

13 : h1 태그가 시간을 텍스트로 표시합니다.

15 : 멈추는 버튼

16 : 움직이게 하는 버튼

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@font-face {
  font-family: 'LAB디지털';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/LAB디지털.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*{ font-family: 'LAB디지털'; }
html, body{ margin: 0; }
.container{ text-align: center; }
.clock{
  color:red; background-color: black; 
  width: 200px; margin: 5px auto;
  border: 2px solid black;
  border-radius: 10px;
}
 

01 : 상업용 무료 한글 폰트인 'LAB디지털'을 사용하였습니다.

10 : 클래스가 clock인 div 요소의 폭을 적당한 크기(200px)로 조절한 다음 양쪽 여백을 동일하게 해주었습니다(auto). 딱히 특별한 것이 없습니다. 검고 네모난 화면에 빨간 글자로 시간을 표시하고자 했습니다.

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

let handleId = 0; 
const h1 = document.getElementById("time")
const go = document.getElementById("go")
const stop = document.getElementById("stop")
 
function getTime(){
  const date = new Date()
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const time = `${hour<10?'0'+hour:hour}:${minutes<10?'0'+minutes:minutes}:${seconds<10?'0'+seconds:seconds}`
  h1.textContent = time;
}
 
go.onclick = function(){
  if(handleId == 0){
    handleId = setInterval(getTime, 1000)
  }
}
 
stop.onclick = function(){
  clearInterval(handleId)
  handleId = 0;
}
 
getTime()

01 : handleId 변수는 간격을 두고 시행하는 동작의 ID, 즉 interval-id 를 저장하기 위해 선언한 변수입니다. setInterval 메소드는 interval-id는 0이 아닌 숫자를 반환합니다.

06: getTime은 함수가 호출된 시점의 시간을 시, 분, 초로 나타내기 위해 정의한 함수입니다.

12 : 시간은 h1 태그에 표시합니다.

17 : 1000ms 마다, 즉 1초마다 getTime을 호출하는 주기적 동작을 선언하고 여기에서 반한되는 interval-id를 handleId 변수에 저장합니다.

22 : 동작 중인 주기적 동작을 제거하기 위해 interval-id를 clearInterval 메소드에 전달하였습니다.

23 : 다시 주기적 동작을 시작할 수 있도록, handleId를 도로 0으로 만들어둡니다.

26 : 페이지가 최초로 펼쳐졌을 때 시간 표시를 하기 위해 getTime을 한번 호출해주었습니다.

끝

이상입니다. 시간 날 때마다 초보자들이 도전해볼 만한 자바스크립트 예제를 만들어 올리고 있는데, 이제는 점점 뭘 올려야 할지 생각이 안나네요. 역시, 실력이 부족하니 생각의 폭도 좁은 듯...ㅠㅠ 더 분발하여 다양한 예제를 올릴 수 있도록 노력해야겠습니다. 그럼 이만 마치겠습니다.

감사합니다.

'IT > 프로그래밍' 카테고리의 다른 글

자바스크립트 스톱워치 만들기 (3)	2021.04.29
자바스크립트 setInterval & clearInterval (0)	2021.04.27
HTML 이미지 : img 태그 src url 지정하는 방법 (1)	2021.04.08
VSCODE 리액트 자동완성 기능 설정하기 (feat. user snippets) (0)	2021.03.26
웹 호스팅 서비스 netlify 사용법 : 내가 만든 웹사이트 배포하기! (1)	2021.03.19

공지사항

티스토리 뷰