<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
let timeOutId;
const response = [];
$screen.addEventListener('click', (e) => {
if (e.target.classList.contains('waiting')) {
e.target.classList.replace('waiting', 'ready');
e.target.textContent = '초록색이 되면 클릭하세요.'
timeOutId = setTimeout(() => {
startTime = new Date();
e.target.classList.replace('ready', 'now')
e.target.textContent = '클릭하세요!'
}, Math.floor(Math.random() * 1000) + 2000);
} else if (e.target.classList.contains('ready')) {
clearTimeout(timeOutId);
e.target.classList.replace('ready', 'waiting');
e.target.textContent = '클릭해서 시작하세요'
alert('빠른 진입 입니다.')
} else if (e.target.classList.contains('now')) {
endTime = new Date();
const currentTime = endTime - startTime;
response.push(currentTime);
const averageTime = response.reduce((a, c) => a + c) / response.length;
$result.textContent = `현재 ${currentTime}ms, 평균 ${averageTime}ms`;
const topFive = response.sort((prev, curr) => prev - curr).slice(0, 5);
topFive.forEach((top, index) => {
$result.append(document.createElement('br'), `${index + 1}위 : ${top}ms`)
})
startTime = null;
endTime = null;
e.target.classList.replace('now', 'waiting');
e.target.textContent = '클릭해서 시작하세요'
}
})
</script>
</body>
babypig