반응형
이런 이미지를 만든다고 가정합니다.
start 기능 - > 버튼 클릭시 숫자가 1초씩 증가한다.
stop 기능 - > 버튼 클릭시 숫자가 멈춘다.
reset 기능 -> 버튼 클릭시 숫자가 초기화 된다.
우선, 숫자를 어떻게 셀것이고 처리할지에 대한 고민이 많았습니다.
그러다가 start 버튼을 누르면 seconds 라는 변수를 선언해서 1씩 증가하게 했습니다.
그러고 그 seconds 변수를 시,분,초로 나타내도록 하였습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stop watch</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="container__column">
<h1 class="time">00:00:00</h1>
</div>
<div class="container__column">
<input type="button" class="start-btn" value="Start" />
<input type="button" class="stop-btn" value="Stop!" />
<input type="button" class="reset-btn" value="Reset" />
</div>
</div>
<script src="js/stopwatch.js"></script>
</body>
</html>
이렇게 html 구조를 하고
const clock = document.querySelector(".time"),
startBtn = document.querySelector(".start-btn"),
stopBtn = document.querySelector(".stop-btn"),
resetBtn = document.querySelector(".reset-btn");
let seconds = 0;
let minutes = 0;
let hours = 0;
let info;
function clockHandler() {
seconds += 1;
console.log(seconds);
}
function paintHandler() {
hours = parseInt(seconds / 3600);
let namuzi1 = seconds % 3600;
minutes = parseInt(namuzi1 / 60);
let namuzi2 = parseInt((seconds % 3600) % 60);
clock.innerText = `${hours < 10 ? "0" + hours : hours}:${
minutes < 10 ? "0" + minutes : minutes
}:${namuzi2 < 10 ? "0" + namuzi2 : namuzi2}`;
}
function startHandler() {
info = setInterval(clockHandler, 1000);
setInterval(paintHandler, 1000);
}
function stopHandler() {
clearInterval(info);
paintHandler();
}
function resetHandler() {
seconds = 0;
paintHandler();
}
function init() {
startBtn.addEventListener("click", startHandler);
stopBtn.addEventListener("click", stopHandler);
resetBtn.addEventListener("click", resetHandler);
}
init();이렇게 start 버튼을 누르면 setInterval() 을 이용해서 1초마다 seconds 변수가 1씩 오르도록 설정하였고
stop 버튼을 누르면 setInterval()을 중지해야 하기 때문에 맨위에 전역변수로 info 를 설정하고
setInterval()의 값을 받도록 하였습니다. 그러고 나서 나중에 clearInterval() 의 인자로 넣어주어 멈추게 하였습니다.
그리고 시간을 구하는 방법은 몫을 구하는 방법과 나머지를 구하는 방법으로 하였습니다.
seconds 변수를 3600으로 나누고 몫을 얻으면 hours 변수에 집어넣었고
seconds 변수를 3600으로 나누고 남은 나머지 값을 60으로 나누어서 몫이 나오면 minutes 변수에 집어넣었습니다.
반응형
'코딩 > JavaScript' 카테고리의 다른 글
| javascript의 데이터타입(원시타입,객체에대한설명) (0) | 2020.04.29 |
|---|---|
| javascript 프로그램 실행시간 알아내는 방법 (0) | 2020.04.29 |
| javascript는 어디에 작성하는가? (0) | 2019.12.11 |
| console.log()에 대한 설명 (console.dir(),console.warn()..) (0) | 2019.12.11 |
| input에 입력한 것을 출력하는 방법!(javascript) (0) | 2019.12.09 |