안녕하세요!
이번 포스트에서는 스탑워치를 만들어보겠습니다.
스틱코드를 통해 코드를 확인하실 수 있습니다.
스틱코드
stickode.com
stopwatch.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>스탑워치 만들기</title>
</head>
<body>
<div style="margin: 100px">
<h1 id="stopwatch" >
00:00:00
</h1>
<div>
<button onclick="startClock()">start</button>
<button onclick="stopClock()">stop</button>
<button onclick="resetClock()">reset</button>
</div>
</div>
<script src="./stopwatch.js" type="text/javascript"></script>
</body>
</html>
stopwatch.js
let timerId;
let time = 0;
const stopwatch = document.getElementById("stopwatch");
let hour, min, sec;
function printTime() {
time++;
stopwatch.innerText = getTimeFormatString();
}
//시계 시작 - 재귀호출로 반복실행
function startClock() {
printTime();
stopClock();
timerId = setTimeout(startClock, 1000);
}
//시계 중지
function stopClock() {
if (timerId != null) {
clearTimeout(timerId);
}
}
// 시계 초기화
function resetClock() {
stopClock()
stopwatch.innerText = "00:00:00";
time = 0;
}
// 시간(int)을 시, 분, 초 문자열로 변환
function getTimeFormatString() {
hour = parseInt(String(time / (60 * 60)));
min = parseInt(String((time - (hour * 60 * 60)) / 60));
sec = time % 60;
return String(hour).padStart(2, '0') + ":" + String(min).padStart(2, '0') + ":" + String(sec).padStart(2, '0');
}
getTimeFormatString()은 12345형식으로 되어있는 time변수를 01:23:45와 같이 변형해주는 함수입니다.
위 코드를 통해 아래와 같이 스탑워치를 만들 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [javascript] 그림판 만들기 (0) | 2021.09.25 |
|---|---|
| [Javascript]TOP버튼 눌러 화면상단으로 스무스 하게 이동하기 (0) | 2021.09.20 |
| [JavaScript] 구글맵 API 클러스터링 만들기 (0) | 2021.07.10 |
| [JavaScript] 빠르게 To Do 리스트 만들기 (0) | 2021.07.08 |
| [JavaScript] 버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 (0) | 2021.06.26 |
