JavaScriptでフラッシュ暗算

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

この記事を三行にまとめると

フラッシュ暗算
今回はMath.ceilを使います
2桁の足し算難すぎぃ

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

フラッシュ暗算

HTML

<div id="display"></div>
<div>
  <input type="number" id="number" />
</div>
<div>
  <button type="button" id="start">START</button>
  <button type="button" id="answer">ANSWER</button>
</div>

CSS

body { text-align: center }
#display { height: 160px; font-size: 100px }
input { width: 565px; padding: 5px; font-size: 48px }
button { width: 280px; padding: 5px; font-size: 48px }
div { margin-bottom: 10px }

JavaScript

display = document.querySelector('#display');
number = document.querySelector('#number');

//スタートボタン
start = document.querySelector('#start');
start.onclick = function() {
  number.value = '';

  total = count = prev = 0;

  timer = setInterval(function() {
    i = Math.ceil(Math.random() * 99);

    if(prev == i) {
      i++;
    }
    prev = i;

    if(count == 5) {
      clearInterval(timer);
      display.innerHTML = '';
    } else {
      total += i;
      display.innerHTML = i;
    }
    count++;
  }, 500)
}

answer = document.querySelector('#answer');
answer.onclick = function() {
  if(number.value == total) {
    display.innerHTML = '正解！';
  } else {
    display.innerHTML = total;
  }
}