<title>반응 속도 테스트</title>
<style>
*{
margin: 0;
}
#screen {
width: 100%;
height: 820px;
text-align: center;
user-select: nono;
font-size: 85px;
}
#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;
let main;
let mains = [];
let mainss = 0;
let mainsss = 0;
$screen.addEventListener('click', () => {
if($screen.classList.contains('waiting')){
$screen.textContent="초록색이 되면 클릭하세요"
$screen.classList.remove('waiting')
$screen.classList.add('ready')
time = setTimeout(() => { // let을 쓰면 작동을 안한다.
startTime = new Date();
$screen.classList.remove('ready')
$screen.classList.add('now')
$screen.textContent="클릭하세요!"
}, Math.floor(Math.random()*1000)+2000)
}
else if($screen.classList.contains('ready')){
clearTimeout(time)
$screen.textContent="너무 빨리 입력하셨습니다."
$screen.classList.remove('ready')
$screen.classList.add('waiting')
}
else if($screen.classList.contains('now')){
endTime = new Date();
main = endTime - startTime
mains.push(main)
for(let x=0; x < mains.length; x++){
mainss += mains[x]
}
mainsss = (mainss-mains[0]) / mains.length
$screen.textContent=`현재 ${main}ms, 평균 ${mainsss}ms`
startTime = null;
endTime = null;
setTimeout(() =>{
$screen.classList.remove('now')
$screen.classList.add('waiting')
$screen.textContent="클릭해서 시작하세요"
} , 1000)
}
})
</script>
</body>
</html>알게 된 점
1. 태그.classList.contains('클래스')
태그에 해당클래스가 들어 있다면 true,들어 있지 않다면 false가 된다.
태그.classList.add('클래스'); // 추가
태그.classList.replace('클래스'); // 수정
태그.classList.remove('클래스'); // 제거
2. 배열.reduce
배열.reduce((누적값, 현재값) => {
return 새로운누적값;
}, 초기값);
[1, 2, 3, 4, 5].reduce((a,c) => {
return a+c;
}, 0);초기값이 없으면 배열의 첫 번째 요소가 초기값이 된다.
초기값 0이 첫 번째 누적값(a)이 되고, 배열의 첫 번째 요소가 현재값이 된다.
a + c를 한 반환값은 다음 번 누적값이 된다.
이런 식으로 배열의 마지막 요소까지 함수가 반복해서 실행된다.
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.