-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathresponse-check-self.html
75 lines (73 loc) · 2.19 KB
/
response-check-self.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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;
$screen.addEventListener('click', (event) => {
if (event.target.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); // 2초에서 3초 사이 2000~3000 사이 수
} else if (event.target.classList.contains('ready')) { // 빨강
clearTimeout(timeoutId);
$screen.classList.remove('ready');
$screen.classList.add('waiting');
$screen.textContent = '너무 성급하시군요!';
} else if (event.target.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((p, c) => p - c).slice(0, 5);
topFive.forEach((top, index) => {
$result.append(
document.createElement('br'),
`${index + 1}위: ${top}ms`,
);
});
startTime = null;
endTime = null;
$screen.classList.remove('now');
$screen.classList.add('waiting');
$screen.textContent = '클릭해서 시작하세요';
}
});
</script>
</body>
</html>