反応速度測定 - セタプロ

反応速度測定

そーし 03/26 14:24

アプリを動かす

コードを見る

<button id="startBtn">スタート</button>
<p id="message">スタートを押してね</p>
<div id="targetArea" style="display:none">
  <button id="hitBtn">いま！</button>
</div>
<p id="result"></p>

#hitBtn {
  font-size: 2rem;
  padding: 20px 40px;
  background: tomato;
  color: white;
  border: none;
  cursor: pointer;
}

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() * 10 + 0;
  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;
});