[ Javascript로 스탑워치 만들기 ]
동생이 타이머 만드는 거 도와달라고 해서 보는데
사실 나도 타이머는 만들어본 적이 없어서, 재밌게 만들어봤다.
늘 그렇듯 코딩에는 답이 없듯이
나도 나만의 방식으로 접근했다고 생각하면 될 것 같다.
css까지 조금 곁들인 원문을 먼저 공유하고, 가장 핵심이 되는 부분에 집중해보자면
메소드 setInterval(), clearInterval()을 이용한 점을 생각할 수 있겠다.
그리고 중간 중간 버그가 생겼던 부분을 생각하면,
start 를 두 번 눌렀을 시에, stop을 눌러도 작동이 안돼는 것
즉 start를 누를 때마다 타이머가 작동 되기 때문에
타이머가 여러 개가 생긴다고 생각하면 된다.
그래서 stop 버튼이 무엇을 더 이상 멈춰야 할 지 모른달까?
이 현상의 원인은 내가 clearInterval()을 했을 때, 각 타이머의 id 값을 넣어준 것이 아니라 그냥 true 를 넣어줬기 때문이다.
(이상하게 실행이 된다는... 논리로 집어 넣었던 것 같은데 옳지 않은 방법이었고)
그리고 또한 start를 눌렀을 때 여러 개의 타이머가 작동되지 않게 끔
count를 이용해서 타이머가 실행 중일 때 start 버튼이 작동되지 않게끔 코딩해야 했다.
여태까지 설명한 부분들이 가장 중점을 두고 코딩한 부분들이다.
디자인은 대강 이런 느낌으로 만들어봤고, 코드도 전문을 공유해본다.
유투브도 살짝 참고하면서 clearInterval()의 감을 잡을 수 있었다.
아래 영상은 타이머 만드는 강좌는 아니고, 타이머 관련 메서드들을 설명하고 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STOPWATCH</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Boogaloo&display=swap');
body {
font-family: 'Boogaloo', cursive;
}
#micro {
font-size: medium;
}
p {
font-size: 50px;
}
button {
background-color: whitesmoke;
color: rgb(17, 5, 5);
font-family: 'Boogaloo', cursive;
}
.w-btn {
position: relative;
border: none;
display: inline-block;
padding: 10px 20px;
border-radius: 15px;
font-family: "paybooc-Light", sans-serif;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-weight: 600;
transition: 0.25s;
}
.w-btn-indigo {
background-color: aliceblue;
color: #1e6b7b;
}
.w-btn-green {
background-color: #77af9c;
color: #d7fff1;
}
</style>
<body>
<div style="text-align: center;">
<p>Stopwatch</p>
<h1><span id="hour">00</span>:<span id="min">00</span>:<span id="sec">00</span>.<span id="micro">00</span></h1>
<button class="w-btn w-btn-green" id="start">start</button>
<button class="w-btn w-btn-indigo" id="stop">stop</button>
<button class="w-btn w-btn-indigo" id="clear">clear</button>
</div>
<script>
window.onload = function(){
let timer_sec;
let timer_min;
let timer_hour;
let timer_micro;
let timer = 0;
//click start button
document.getElementById("start").addEventListener("click", function(){
//console.log(timer);
if(timer > 0){
return;
}
var micro = parseInt(document.getElementById("micro").innerText);
var sec = parseInt(document.getElementById("sec").innerText);
var min = parseInt(document.getElementById("min").innerText);
var hour = parseInt(document.getElementById("hour").innerText);
//start seconds
timer_micro = setInterval(function(){
micro++;
if(micro == 100) {
micro = "00";
} else if(micro < 10){
micro = "0" + micro;
}
document.getElementById("micro").innerText = micro;
}, 10);
//start seconds
timer_sec = setInterval(function(){
//console.log(i);
sec++;
if(sec == 60) {
sec = "00";
} else if(sec < 10){
sec = "0" + sec;
}
document.getElementById("sec").innerText = sec;
}, 1000);
//start minutes
timer_min = setInterval(function(){
min++;
if(min == 60) {
min = 0;
} else if(min < 10){
min = "0" + min;
}
document.getElementById("min").innerText = min;
}, 60000);
//start hours
timer_hour = setInterval(function(){
//console.log(hour);
hour++;
if(hour < 10){
hour = "0" + hour;
}
document.getElementById("hour").innerText = hour;
}, 3600000);
timer++;
//console.log(timer);
});
//click stop button
document.getElementById("stop").addEventListener("click", function(){
stop();
});
function stop(){
clearInterval(timer_micro);
clearInterval(timer_sec);
clearInterval(timer_min);
clearInterval(timer_hour);
timer--;
if(timer < 0)
timer = 0;
}
//click clear button
document.getElementById("clear").addEventListener("click", function(){
stop();
document.getElementById("micro").innerText = "00";
document.getElementById("sec").innerText = "00";
document.getElementById("min").innerText = "00";
document.getElementById("hour").innerText = "00";
});
}
</script>
</body>
</html>
기본으로 다 만들고 나서 약간의 폰트와 버튼만 바꾸어줬다
미니미니한 나만의 타이머를 모두가 만들 수 있지 않을까
깃허브로 간단하게 배포해봤다
STOPWATCH
uz1ns.github.io
css로 버튼꾸미기는 아래 블로그에서 참고했다
CSS 버튼 이쁘게 꾸미기
!codepenwhdnjsdyd111/embed/xxdpMwv?default-tab=html%2Cresult다음에도 쉽게 사용할 수 있도록 생각나는 버튼들을 직접 만들어 보았다.일반 버튼적당한 래디우스호버 시 글자 너비 조금 넓히고 스케일 키우기클
velog.io
'포트폴리오 및 미니프로젝트' 카테고리의 다른 글
| 학원 테마 웹사이트 제작 (0) | 2023.06.21 |
|---|---|
| [학원 웹사이트] 01. 네비게이션 바 만들기 (0) | 2023.06.04 |
| 영화 웹서비스 만들기 (1) | 2023.06.04 |
| MBTI 디즈니 공주 테스트 (자바스크립트로 mbti 만들기) (3) | 2023.03.07 |