JavaScript-반응속도 테스트 예제

Jenna·2022년 12월 17일

JavaScript 예제 자바스크립트

javascript

목록 보기

10/16

반응속도를 테스트 할 수 있는 프로그래밍 예제

📌 순서도 그리기

반응속도 테스트 프로그램의 순서도는 두 가지 경우로 작성될 수 있다.
경우의 수에 해당하는 만큼 동시에 작성하거나 순서대로 나열하는 방법이 있다.

📌 코드보기

<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;
        // $screen.className
        // 태그.classList.contains('클래스') 클래스가 들어있으면 true, 들어있지 않으면 false
        $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사이의 수
                //0 <= x <1 -> 0 <= x*1000 < 1000 -> 0<= x*1000+2000 < 1000+2000 = 3000
            } else if (event.target.classList.contains('ready')) { //빨강
                clearTimeout(timeoutId); //다시 초록색창 안나오게 timer제거해주기
                $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);
                //[1,2,3,4].reduce((a,c)=>(a+c),0) 누적값 a :0 , c:1 , 0 = 초기값
                const average = records.reduce((a, c) => a + c) / records.length;
                $result.textContent = `현재 ${current}ms, 평균: ${average}ms`;
                //혹시나 예전값이 남아있을경우를 대비해서 써줌 
                startTime = null;
                endTime = null;
                //시간차이 저장하기
                $screen.classList.remove('now');
                $screen.classList.add('waiting');
                $screen.textContent = '클릭해서 시작하세요!';
            }
        });
    </script>
</body>

📌 기능추가하기 - 1위부터 5위까지 순서대로 결과창에 표시

const topFive = records.sort((p, c) => p - c).slice(0, 5);
                topFive.forEach((top, index) => {
                    $result.append(
                        document.createElement('br'),
                        `${index + 1}위: ${top}ms`,
                    );
                });