티스토리 뷰
학습목표: 비동기함수 setTimeout 함수를 더 잘 제어해서 간단한 프로그램을 만들어 본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응속도 테스트</title>
<style>
#screen {
width: 300px;
height: 200px;
text-align: center;
user-select: none;
}
#screen.waiting {
background-color: aqua;
}
#screen.ready {
background-color: red;
color: white;
}
#screen.now {
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="screen" class="waiting">클릭해서 시작하세요</div>
<div id="result"></div>
<script>
const $screen = document.querySelector('#screen');
const $result = document.querySelector('#result');
let startTime;
let endTime;
const records = [];
let timeoutId; //setTimeout 변수 담기용
//해당 클래스 있는지 T/F로 알수 있음
$screen.addEventListener('click', function() {
if ($screen.classList.contains('waiting')) {//대기화면
$screen.classList.remove('waiting');
$screen.classList.add('ready');
$screen.textContent = '초록색이 되면 클릭하세요.';
timeoutId = setTimeout(function() {
startTime = new Date();
$screen.classList.remove('ready');
$screen.classList.add('now');
$screen.textContent = '클릭하세요!';
}, Math.floor((Math.random() * 1000) + 2000)); //2000~3000 사이 수
} else if ($screen.classList.contains('ready')) { //준비 화면
clearTimeout(timeoutId);
$screen.classList.remove('ready');
$screen.classList.add('waiting');
$screen.textContent = '너무 성급하시군요!';
} else if ($screen.classList.contains('now')) { // 클릭 화면
endTime = new Date();
const current = endTime - startTime;
records.push(current);
const average = records.reduce((a, c) => a + c) /records.length;
$result.textContent = `현재: ${current}ms, 평균:${average}ms`;
const topFive = records.sort((a, b) => a - b).slice(0, 5);
topFive.forEach((v, i) => {
$result.append(document.createElement('br'),`${i+1}등: ${v}ms`);
});
//오류방지를 위한 값 초기화
startTime = null;
endTime = null;
$screen.classList.remove('now');
$screen.classList.add('waiting');
$screen.textContent = '클릭해서 시작하세요';
}
})
</script>
</body>
</html>위의 코드를 이용한 프로그램
클릭해서 시작하세요
'WEB > JavaScript' 카테고리의 다른 글
| [크롬 앱 만들기] #3.8 css in js | toggle function (0) | 2022.01.16 |
|---|---|
| [크롬 앱 만들기] #3.6 css in js | getter setter (0) | 2022.01.16 |
| [제로초JS] chap7 가위바위보 (0) | 2022.01.13 |
| var와 let 차이 이해하기 (0) | 2022.01.13 |
| [제로초JS] chap6 타이머 사용한 로또추첨기 (0) | 2022.01.13 |
댓글