반응형
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown Timer</title>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timer">
<div class="timer__controls">
<button data-time="20" class="timer__button">20 Secs</button>
<button data-time="300" class="timer__button">Work 5</button>
<button data-time="900" class="timer__button">Quick 15</button>
<button data-time="1200" class="timer__button">Snack 20</button>
<button data-time="3600" class="timer__button">Lunch Break</button>
<form name="customForm" id="custom">
<input type="text" name="minutes" placeholder="Enter Minutes">
</form>
</div>
<div class="display">
<h1 class="display__time-left"></h1>
<p class="display__end-time"></p>
</div>
</div>
<script src="scripts-START.js"></script>
</body>
</html>
목표
스탑워치기능을 넣어보자.
코드 분석
1. 사용할 변수를 선언
let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');
2. 사용할 함수를 선언
function timer(seconds) {
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
displayEndTime(then);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
if(secondsLeft < 0) {
clearInterval(countdown);
return;
}
displayTimeLeft(secondsLeft);
}, 1000);
}
.clearInterval은 호출에 의해 발생된 시간제한을 제거해주는 것이다.timer함수의 내용을 보면, 시간 변수들을 지정해주고 남은 초가 0보다 작아지게되면 끝나도록 그보다 크다면 displayTimeLeft함수를 실행하도록 한다.
function displayTimeLeft(seconds) {
const minutes = Math.floor(seconds / 60);
const remainderSeconds = seconds % 60;
const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
document.title = display;
timerDisplay.textContent = display;
}
displayTimeLeft는 괄호에 초단위 시간이 들어가면 그 수를 분:초로 나타내주는 것인데 초단위가 10아래로 내려갈 경우에는 앞에 0을 붙히도록 한 다음 출력해주는 것이다. 그리고 문서의 타이틀 역시 스탑워치의 진행대로 바꾸어 준다.
function displayEndTime(timestamp) {
const end = new Date(timestamp);
const hour = end.getHours();
const adjustedHour = hour > 12 ? hour - 12 : hour;
const minutes = end.getMinutes();
endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
}
displayEndTime은 끝나는 시간이 언제인지 시:분으로 나타내주는 함수이고, 이 역시도 분단위가 10아래로 내려가면 0을 붙혀준다.
function startTimer() {
const seconds = parseInt(this.dataset.time);
timer(seconds);
}
parseInt를 이용하여 시간을 string으로 바꾸어 준다.
그리고 이를 timer함수에 넣어주어 실행하도록 하는 방식이다.
3. 사용할 이벤트 리스너 적용
buttons.forEach(button => button.addEventListener('click', startTimer));
document.customForm.addEventListener('submit', function(e) {
e.preventDefault();
const mins = this.minutes.value;
console.log(mins);
timer(mins * 60);
this.reset();
});
버튼을 한번 누를때마다 startTimer함수를 실행하고
메뉴바 오른쪽에 있는 상자에 값을 제출할 때마다 이 값으로 타이머함수를 실행하도록 하고, 상자를 리셋하여 적은 값이 남아있지 않도록 해준다.
마무리
parseInt() = 괄호에 넣은 문자열 값을 수로 바꾸어 주는 것Math.floor() = 그 값보다 크지않은 최대 정수를 출력Math.round() = 반올림
parseInt의 경우는 아예 처음 접해보았고, 아래 두개는 이전에도 자주 사용했는데 플로어에 대해서 잘못알고있던 부분이 있어서 라운드와 같이 다시한번 정리했다.
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 31. JavaScript 30을 마치며 (1) | 2017.04.27 |
|---|---|
| 30. Whack A Mole (0) | 2017.04.27 |
| 28. Video Speed Controller (0) | 2017.04.27 |
| 27. Click and Drag (0) | 2017.04.26 |
| 26. Stripe Follow Along Nav (0) | 2017.04.26 |
