자바스크립트
- Date 클래스
- 배열.reduce
<!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 = [];
const fast_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() {
//Date 클래스를 통해서 시간을 구함
startTime = new Date();
$screen.classList.remove('ready');
$screen.classList.add('now');
$screen.textContent = '클릭하세요!';
}, Math.floor(Math.random() * 1000) + 2000); // 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')) { //초록
//const는 한번 선언하고 다시는 = 을 통해서 대입할 수 없다고 생각하자 그외에는 가능하다.
endTime = new Date();
const current = endTime - startTime;
records.push(current);
// reduce는 배열의 값들을 하나의 새로운 값으로 합치는 메서드
//초깃값이 없으면(두번째 인수) 배열의 첫 번째 요소가 초깃값이 됩니다
/*
[1, 2, 3, 4, 5].reduce((a, c) => {
a[c] = c * 10;
return a;
}, {});
//{1: 10, 2: 20, 3: 30, 4: 40, 5: 50}
*/
const average = records.reduce((a, c) => a + c) / records.length;
$result.textContent = `현재 ${current}ms, 평균 ${average}ms`;
//최고빠른 5 개 기록 가져오기
const fast_records = records.sort((a,b)=>a-b).slice(0,5);
fast_records.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>
클라우드
초보 개발자의 성장기💻