ミッション：「いま！」が現れたら素早くボタンを押して、反応速度を計測しよう！
HTMLタブに下のコードを貼り付けてください。
<button id="startBtn">スタート</button>
<p id="message">スタートを押してね</p>
<div id="targetArea" style="display:none">
<button id="hitBtn">いま！</button>
</div>
<p id="result"></p>
CSSタブに下のコードを貼り付けてください。
#hitBtn {
font-size: 2rem;
padding: 20px 40px;
background: tomato;
color: white;
border: none;
cursor: pointer;
}
JSタブに下のコードを貼り付けてください。
const startBtn = document.querySelector('#startBtn');
const message = document.querySelector('#message');
const targetArea = document.querySelector('#targetArea');
const hitBtn = document.querySelector('#hitBtn');
const result = document.querySelector('#result');
let startTime = 0;
startBtn.addEventListener('click', function() {
message.textContent = '準備して...';
result.textContent = '';
startBtn.disabled = true;
targetArea.style.display = 'none';
const delay = Math.random() * 2000 + 1000;
setTimeout(function() {
targetArea.style.display = 'block';
startTime = Date.now();
}, delay);
});
hitBtn.addEventListener('click', function() {
const elapsed = Date.now() - startTime;
result.textContent = elapsed + ' ミリ秒！';
targetArea.style.display = 'none';
message.textContent = 'もう一度？';
startBtn.disabled = false;
});
「スタート」を押して、赤いボタンが出たら素早く押し、タイムが表示されることを確認してください。
setTimeout で待ってから何かするconst delay = Math.random() * 2000 + 1000;
setTimeout(function() {
targetArea.style.display = 'block';
startTime = Date.now();
}, delay);
setTimeout(処理, 時間) は「指定した時間（ミリ秒）後に処理を実行する」命令です。delay は1000〜3000ミリ秒のランダムな値なので、1〜3秒後にランダムなタイミングで赤いボタンが現れます。
Date.now() で時刻を記録するstartTime = Date.now(); // 赤いボタンが出た瞬間の時刻
const elapsed = Date.now() - startTime; // 押した瞬間の時刻 − 出た瞬間の時刻
Date.now() は「今この瞬間の時刻」をミリ秒単位の数値で返します。赤いボタンが出た瞬間と押した瞬間の差を引き算することで、反応速度が計算できます。
style.display で表示・非表示を切り替えるtargetArea.style.display = 'none'; // 非表示
targetArea.style.display = 'block'; // 表示
display: none で要素を画面から消し、display: block で表示します。最初のHTMLに style="display:none" と書いてあるのはページを開いた時点から非表示にするためです。
const delay = Math.random() * 2000 + 1000;
* 2000 で揺れの幅、+ 1000 で最短の待ち時間を変えられます。例えば * 1000 + 500 にすると0.5〜1.5秒になります。
setTimeout と Date.now() を使っている