티스토리 뷰
안녕하세요. 이번 포스팅에서는 자바스크립트(라이브러리 미사용)를 이용해 스톱워치 구현하는 방법에 대해 정리해보도록 하겠습니다. 해당 코드에 대한 설명은 제 유튜브 채널에서 동영상으로도 만나보실 수 있으니 참고해주세요.
목표
다음에 이미지와 같은 스톱워치를 웹페이지 상에서 구현하는 것이 목표입니다.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>스톱워치</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>스톱워치</h2>
<h1>
<span id="minutes">00</span>:<span id="seconds">00</span>:<span id="tenMillis">00</span>
</h1>
<button id="bt__start">START</button>
<button id="bt__stop">STOP</button>
<button id="bt__reset">RESET</button>
</div>
<script src="script.js"></script>
</body>
</html>
|
12행 : container 는 스톱워치의 전체 영역을 표시합니다.
15행 : 분, 초, 미리초 단위의 숫자를 각각 span 태그로 묶어 분류해주었습니다.
17행 - 19행 : 각각의 버튼을 서로 다른 id로 식별하였습니다.
CSS
|
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
27
28
29
30
|
@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디지털'; box-sizing: border-box; }
html, body{ margin: 0; background-color: black; }
.container{
width: 80%; min-width: 320px; max-width: 640px;
margin: 10px auto; padding: 5px 0 15px;
text-align: center; border: 1px solid white;
border-radius: 16px;
}
h2{ color: white; }
h1{ color: red; }
h1 > span{
display: inline-block;
width: 40px;
}
button{
color: darkslategray; background-color: lightgray;
font-size: 16px; padding: 6px;
width: 100px; border: none; border-radius: 3px;
cursor: pointer;
}
button:active{
color: lightgray;
background-color: darkslategray;
}
|
01행 : 상업용 무료 폰트 'LAB디지털'을 사용하였습니다.
08행 : 전체 배경은 검정색입니다.
10행 : 스톱워치 전체 영역은 최소 320, 최대 640 픽셀 크기를 가지나 기본적으로 전체 영역의 80%를 차지합니다.
18행 : span 태그는 인라인 요소이므로 너비를 지정할 수 없습니다. 때문에 inline-block 요소로 재정의해주었습니다.
27행 : 마우스로 버튼을 꾹 누르고 있을 때의 스타일을 지정하기 위해 의사클래스 :active 사용하였습니다.
JAVASCRIPT
|
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
let minutes = 0;
let seconds = 0;
let tenMillis = 0;
const appendTens = document.getElementById("tenMillis");
const appendSeconds = document.getElementById("seconds");
const appendMinutes = document.getElementById("minutes");
const buttonStart = document.getElementById("bt__start");
const buttonStop = document.getElementById("bt__stop");
const buttonReset = document.getElementById("bt__reset");
let intervalId;
buttonStart.onclick = function(){
clearInterval(intervalId)
intervalId = setInterval(operateTimer, 10)
}
buttonStop.onclick = function(){
clearInterval(intervalId)
}
buttonReset.onclick = function(){
clearInterval(intervalId)
tenMillis = 0; seconds = 0; minutes = 0;
appendTens.textContent = "00"
appendSeconds.textContent = "00"
appendMinutes.textContent = "00"
}
// 10ms 마다 시간에 대한 숫자가 증가한다!
function operateTimer(){
tenMillis++;
appendTens.textContent = tenMillis > 9 ? tenMillis : '0' + tenMillis
if(tenMillis > 99){
seconds++;
appendSeconds.textContent = seconds > 9 ? seconds : '0' + seconds
tenMillis = 0
appendTens.textContent = "00"
}
if(seconds > 59){
minutes++;
appendMinutes.textContent = minutes > 9 ? minutes : '0' + minutes
seconds = 0
appendSeconds.textContent = "00"
}
}
|
10행 : 반복 실행 타이머(스톱워치 동작에 대한)를 제거하기 위해 id를 받을 변수를 선언하였습니다.
14행 : 시간에 대한 값을 변경해주는 함수 operateTimer를 10ms마다 호출합니다.
18행 : clearInterval 메소드에 반복 실행 타이머 id를 전달하여 타이머 동작을 취소합니다.
30행 : 미리초 단위를 계속적으로 변경하여 시간의 흐름을 나타낼 수 있는 함수 operateTimer 입니다.
'IT > 프로그래밍' 카테고리의 다른 글
| [JavaScript DOM] DOM 이란 무엇일까? (0) | 2021.06.04 |
|---|---|
| [JavaScript DOM] textContent innerText 차이 (0) | 2021.05.11 |
| 자바스크립트 setInterval & clearInterval (0) | 2021.04.27 |
| 자바스크립트 디지털 시계 만들기 (0) | 2021.04.10 |
| HTML 이미지 : img 태그 src url 지정하는 방법 (1) | 2021.04.08 |