✅오늘의 과제
➰반복문과 조건문을 이용하여 간단한 스톱워치 만들기
➰코드
day7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day7</title>
<style>
#all {
margin-top: 35vh;
}
#time {
text-align: center;
}
.time {
font-size: 80px;
}
#timeBtns {
text-align: center;
}
.timeFunc {
background-color: yellowgreen;
border-radius: 30px;
border: 0;
padding: 30px;
font-size: 60px;
}
.funcImg {
width: 50px;
height: 45px;
}
</style>
</head>
<body>
<div id="all">
<div id="time">
<span class="time">🕐</span>
<span class="time" id="timer">00:00:00</span>
<span class="time">🕐</span>
</div>
<div id="timeBtns">
<button type="button" class="timeFunc" id="stt" onclick="start()">
<img class="funcImg" src="./images/start.png" alt="stop">
</button>
<button type="button" class="timeFunc" id="stp" onclick="stop()">
<img class="funcImg" src="./images/stop.png" alt="stop">
</button>
<button type="button" class="timeFunc" id="ret" onclick="reset()">
<img class="funcImg" src="./images/reset.png" alt="reset">
</button>
</div>
</div>
<script src="day7.js"></script>
</body>
</html>
day7.js
let times = document.getElementById("timer");
let hour = 0;
let min = 0;
let sec = 0;
let stopWatch;
function setting() {
hour = parseInt(hour);
min = parseInt(min);
sec = parseInt(sec);
sec += 1;
if (sec === 60) {
min += 1;
sec = 0;
}
if (min === 60) {
hour += 1;
min = 0;
sec = 0;
}
if (hour < 10 || hour === 0) {
hour = "0" + hour;
}
if (min < 10 || min === 0) {
min = "0" + min;
}
if (sec < 10 || sec === 0) {
sec = "0" + sec;
}
times.innerHTML = hour + ':' + min + ':' + sec;
start();
}
function start() {
stopWatch = setTimeout("setting()", 1000);
}
function stop() {
clearTimeout(stopWatch);
}
function reset() {
times.innerHTML = "00:00:00";
clearTimeout(stopWatch);
hour = 0;
min = 0;
sec = 0;
}
코드 설명
시간을 나타내는 숫자를 span 태그 안에 넣고 id를 timer로 했다. 변수 times에 id가 timer인 요소를 선택해서 대입해두었다. 변수 hour, min, sec를 0으로 초기화하며 선언했다.
id가 stt인 버튼을 클릭하면 start() 함수가 실행된다. start() 함수는 setTimeout() 함수를 이용하여 1초에 한 번씩 setting() 함수를 실행하여 변수 stopwatch에 대입한다.
setting() 함수는 실제로 타이머의 동작을 하게 하는 함수이다. 변수 hour, min, sec를 정수형으로 대입하고, 변수 sec의 값을 1씩 늘린다. 변수 sec의 값이 60이 되면, 변수 sec은 0이 되고, 변수 min의 값은 1씩 증가한다. 변수 min의 값이 60이 되면, 변수 min, sec은 0이 되고 hour은 1씩 증가한다. 변수 hour, min, sec가 0이거나 10보다 작을 경우 변수 값 앞에 0을 붙여준다. 결과를 변수 times에 대입하여 화면에 1초씩 시간이 가게 만든다.
id가 stp인 버튼을 클릭하면 stop() 함수가 실행된다. stop()함수는 clearTimeout() 함수를 이용하여 setTimeout() 함수를 취소한다. 즉 start() 함수의 동작을 멈추게 하기 때문에 화면에 나타난 시간이 멈추게 한다.
id가 ret인 버튼을 클릭하면 reset()함수가 실행된다. reset() 함수는 변수 times의 내용을 "00:00:00"으로 바꾸어 화면에 초기 시간이 출력되게 하고, clearTimeout() 함수를 이용하여 start() 함수의 동작을 멈추게 하며, 세 변수를 0으로 초기화한다.
💨현재 버튼을 여러번 누르면 여러 번 누른 만큼 함수가 실행되어 시간이 1초보다 많이 늘어나는 현상이 발생한다. 이는 추후에 코드를 수정할 예정이다.
➰코드실행화면(https://jsday7.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day7
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
'WEB > JS' 카테고리의 다른 글
| [JS] 8-2. 과제 - 함수 (0) | 2021.09.21 |
|---|---|
| [JS] 8-1. 함수 (2) | 2021.09.21 |
| [JS] 7-1. 조건문 및 반복문 (0) | 2021.09.21 |
| [JS] 6-2. 과제 - 연산자 (2) | 2021.09.20 |
| [JS] 6-1. 연산자 (0) | 2021.09.20 |
