추가로 가장 빠른 다섯번의 시도가 몇 초인지 상위 5개만 보여주세요.
6번 이상 시도한 경우에도 상위 5개만 보여주세요
나의풀이
<!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>
<div id="score_chart"></div>
<script>
const $screen = document.querySelector("#screen");
const $result = document.querySelector("#result");
const $scoreChart = document.querySelector("#score_chart"); //나의풀이 1
let startTime;
let endTime;
const records = [];
let timeoutId;
$screen.addEventListener("click", function () {
if ($screen.classList.contains("waiting")) {
// 파랑
//1. 시작 페이지에서 "첫번째 클릭"시 해당 if문 실행
$screen.classList.remove("waiting");
$screen.classList.add("ready"); //2. 배경이 빨간색으로 바뀜
$screen.textContent = "초록색이 되면 클릭하세요";
timeoutId = setTimeout(function () {
//시간시간제기
startTime = new Date();
$screen.classList.remove("ready");
$screen.classList.add("now"); //3. 배경이 초록색으로 바뀜
$screen.textContent = "클릭하세요!";
}, Math.floor(Math.random() * 1000) + 2000); // 2초에서 3초 사이 2000~3000 사이 수
} else if ($screen.classList.contains("ready")) {
// 빨강
//빨강인데, 클릭하는 경우 해당 if문 실행
clearTimeout(timeoutId);
$screen.classList.remove("ready");
$screen.classList.add("waiting");
$screen.textContent = "너무 성급하시군요!";
} else if ($screen.classList.contains("now")) {
// 초록
//4. "두번째 클릭"시 해당 if문 실행
//끝시간 재기
endTime = new Date();
const current = endTime - startTime;
//5.시간 차이 저장하기
records.push(current);
//나의풀이 2
records.sort((a, b) => {
return a - b;
});
const average = records.reduce((a, c) => a + c) / records.length;
$result.textContent = `현재 ${current}ms, 평균: ${average}ms`;
$scoreChart.textContent = `상위 5개 : ${records.slice(0, 5)}ms`; //나의 풀이 3
startTime = null;
endTime = null;
$screen.classList.remove("now");
$screen.classList.add("waiting");
$screen.textContent = "클릭해서 시작하세요";
}
});
</script>
</body>
</html>
강사풀이
<!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', function () {
if ($screen.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 ($screen.classList.contains('ready')) { // 빨강
clearTimeout(timeoutId);
$screen.classList.remove('ready');
$screen.classList.add('waiting');
$screen.textContent = '너무 성급하시군요!';
} else if ($screen.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>
slice() 특이사항
array=[1, 2, 3]
array.slice(0, 5) 인 경우
여전히 array=[1, 2, 3] 이다.
오류가 발생하지 않는다.★★'렛츠기릿 자바스크립트' 카테고리의 다른 글
| 반응 속도 체크 (0) | 2023.01.17 |
|---|---|
| 가위 바위 보 (3선승제) (0) | 2023.01.16 |
| 로또 등수 매기기 (self) (0) | 2023.01.16 |
| 로또 만들기 self (공에 색깔 넣기) (0) | 2023.01.15 |
| 로또 만들기 - splice( )★★+태그요소만들기+className추가 +sort() (0) | 2023.01.15 |