JavaScriptで電卓つくってみた

生のHTML, JavaScriptを使って電卓を作ってみました。

ソースコード

<div id="calc">
  <p id="value">0</p>
  <button onclick="del()"><</button>
  <button onclick="c()">C</button>
  <button onclick="ac()">AC</button>
  <button onclick="push('/')">/</button>
  <br />
  <button onclick="push('7')">7</button>
  <button onclick="push('8')">8</button>
  <button onclick="push('9')">9</button>
  <button onclick="push('*')">*</button>
  <br />
  <button onclick="push('4')">4</button>
  <button onclick="push('5')">5</button>
  <button onclick="push('6')">6</button>
  <button onclick="push('-')">-</button>
  <br />
  <button onclick="push('1')">1</button>
  <button onclick="push('2')">2</button>
  <button onclick="push('3')">3</button>
  <button onclick="push('+')">+</button>
  <br />
  <button onclick="push('0')">0</button>
  <button onclick="push('00')">00</button>
  <button onclick="push('.')">.</button>
  <button onclick="eq()">=</button>
</div>
<script>
  var value = 0
  var symbol = ''
  var buf = ''
  var do_clear = false
  function push(str) {
    if (do_clear) {
      symbol = buf = ''
      do_clear = false
    }
    if (str === '+' || str === '-' || str === '*' || str === '/') {
      if (buf) eq(true)
      symbol = str
    } else {
      buf += str
      document.getElementById('value').innerText = buf
    }
  }
  function eq(do_clear_immediately = false) {
    if (symbol === '') {
      value = Number(buf)
    } else if (symbol === '+') {
      value += Number(buf)
    } else if (symbol === '-') {
      value -= Number(buf)
    } else if (symbol === '*') {
      value *= Number(buf)
    } else if (symbol === '/') {
      value /= Number(buf)
    }
    if (do_clear_immediately) symbol = buf = ''
    else do_clear = true
    document.getElementById('value').innerText = String(value)
  }
  function del() {
    if (do_clear) {
      symbol = ''
      buf = String(value)
      do_clear = false
    }
    buf = buf.substr(0, buf.length - 1)
    document.getElementById('value').innerText = buf ? buf : 0
  }
  function c() {
    buf = ''
    document.getElementById('value').innerText = '0'
  }
  function ac() {
    value = 0
    symbol = buf = ''
    document.getElementById('value').innerText = '0'
  }
</script>
<style>
  #value {
    font-size: 32px;
    text-align: right;
  }
  #calc button {
    width: 64px;
    height: 32px;
    margin: 2px;
  }
  #calc {
    border: 1px solid black;
    width: 320px;
    padding: 10px;
  }
</style>