반응 속도 체크 - 1단계
<!DOCTYPE html>
<html lang="en">
<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>
</body>
<script>
const $screen = document.querySelector("#screen");
const $result = document.querySelector("#result");
</script>
</html>
반응 속도 체크 - 2단계(시작시간, 끝시간)
<!DOCTYPE html>
<html lang="en">
<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>
</body>
<script>
const $screen = document.querySelector("#screen");
const $result = document.querySelector("#result");
let startTime;
let endTime;
const records = [];
$screen.addEventListener("click", (event) => {
if (event.target.classList.contains("waiting")) {
//1. 시작 페이지에서 "첫번째 클릭"시 해당 if문 실행
$screen.classList.remove("waiting");
$screen.classList.add("ready"); //2. 배경이 빨간색으로 바뀜
$screen.textContent = "초록색이 되면 클릭하세요";
setTimeout(function () {
//시간시간제기
startTime = new Date();
$screen.classList.remove("ready");
$screen.classList.add("now"); //3. 배경이 초록색으로 바뀜
$screen.textContent = "클릭하세요";
}, Math.floor(Math.random() * 1000) + 2000); //2000~3000사이의 수
} else if (event.target.classList.contains("ready")) {
} else if (event.target.classList.contains("now")) {
//4. "두번째 클릭"시 해당 if문 실행
//끝시간 재기
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`;
startTime = null;
endTime = null;
$screen.classList.remove("now");
$screen.classList.add("waiting");
$screen.textContent = "클릭해서 시작하세요";
}
});
</script>
</html>
반응 속도 체크 - 3단계
<!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")) {
// 파랑
//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);
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>
</html>
요약정리
반응 속도 테스트
태그.className →클래스를 선택한다.
태그.classList.contains('클래스') → waiting클래스가 존재하는지 확인
태그.classList.add('클래스'); //추가
태그.classList.replace('기존클래스' , '수정클래스'); //수정
태그.classList.remove('클래스'); //제거
현재 시간 new Date()
자바스크립트에서는 0이 1월이고, 1이 2월이다.
new Date().getFullYear()
new Date().getMonth()
new Date().getDate()
new Date(2021, 2, 31); → "2021년 1월 31일"
4월 3일부터 3월 1일까지의 일수는??
const diff = new Date(2022, 3, 3) - new Date(2022, 2, 1)
2851200000 ms
const diff = (new Date(2022, 3, 3) - new Date(2022, 2, 1))/1000
2851200 sec
const diff = (new Date(2022, 3, 3) - new Date(2022, 2, 1))/1000/60
47520 min
const diff = (new Date(2022, 3, 3) - new Date(2022, 2, 1))/1000/60/60
792 hours
const diff = (new Date(2022, 3, 3) - new Date(2022, 2, 1))/1000/60/60/24
33일
const numbers = [1, 2, 3, 4]
배열.reduce((누적값, 현재값) => {
return 새로운 누적값;
}, 초기값);
배열의 모든 요소 더하기
numbers.reduce((acc, cur, idx) => {
console.log("acc: ", acc, "cur: ", cur) acc: 0 cur: 1
return acc + cur; //리턴된 acc + cur은 새로운 acc가 된다.
}, 0); //0은 acc의 초기값
배열의 모든 요소 더하기 (코드를 줄인 경우)
numbers.reduce( (cur, acc) => (a+c), 0 ) 0은 acc의 초기값
배열의 모든 요소 곱하기
numbers.reduce( (acc, cur) => (acc * cur), 1) 1은 acc의 초기값
배열의 모든 요소 더하기 (acc의 초기값이 없는 경우)
numbers.reduce( (cur, acc) => (a+c)) 배열의 첫번째 요소인 1은 acc의 초기값
reduce()메서드에서 acc의 초기값을 설정하지 않는 경우 배열에서의 첫번째 요소가 acc의 초기값이 된다.
현재 case의 경우 numbers 배열의 첫번째 요소인 1이 acc의 초기값이 된다.
String배열요소를 객체르 바꾸기
const strArr = [ '철수', '영희', '헌영', '한솔' ]
strArr.reduce( (acc, cur, idx) => {
console.log("acc: ", acc, "cur: ", cur)
acc[idx] =cur
return acc //리턴된 acc는 새로운 객체가 된다.
}, { } ); //{ } 빈 객체는 acc의 초기값이다.
<실행결과>
acc: {} cur: 철수
acc: {0: '철수'} cur: 영희
acc: {0: '철수', 1: '영희'} cur: 헌영
acc: {0: '철수', 1: '영희', 2: '헌영'} cur: 한솔
{0: '철수', 1: '영희', 2: '헌영', 3: '한솔'} reduce를 이용해서 새로운 객체 생성
'렛츠기릿 자바스크립트' 카테고리의 다른 글
반응 속도 체크 (self) -forEach, sort, slice특이사항★★ (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 |