【Javascript】簡易電卓を短いコードで作ってみた

Javascriptで簡易電卓を作る方法をまとめました。

簡易電卓
サンプルコード

簡易電卓

Javascriptで簡単な電卓を作ってみました。
コードを動的に実行できる「eval関数」を使用することで、10行程度で作成できます。

実行例

<br />

サンプルページ

サンプルコード

サンプルプログラムのソースコードです。

Jacapre

function calc(cmd) {
  if (cmd == "=") {
    document.form.text.value = eval(document.form.text.value);
  } else if (cmd == "C") {
    document.form.text.value = "";
  } else {
    document.form.text.value += cmd;
  }
}

HTML

<!DOCtype html>
<html>
<head>
  <meta charset="utf-8">
  <title>簡易電卓</title>
  <pre title="main.js"></pre>
  <link rel='stylesheet' href='main.css' type='text/css' />
</head>
<body>

<form name="form" id="calcForm">
  <table id="calcTable">
    <tr>
      <td colspan="3"><input type="text" name="text" value="0"></td>
      <td><input type="button" value="Ｃ" onClick="calc('C')"></td>
    </tr>
    <tr>
      <td><input type="button" value="７" onClick="calc('7')"></td>
      <td><input type="button" value="８" onClick="calc('8')"></td>
      <td><input type="button" value="９" onClick="calc('9')"></td>
      <td><input type="button" value="／" onClick="calc('/')"></td>
    </tr>
    <tr>
      <td><input type="button" value="４" onClick="calc('4')"></td>
      <td><input type="button" value="５" onClick="calc('5')"></td>
      <td><input type="button" value="６" onClick="calc('6')"></td>
      <td><input type="button" value="✕" onClick="calc('*')"></td>
    </tr>
    <tr>
      <td><input type="button" value="１" onClick="calc('1')"></td>
      <td><input type="button" value="２" onClick="calc('2')"></td>
      <td><input type="button" value="３" onClick="calc('3')"></td>
      <td><input type="button" value="－" onClick="calc('-')"></td>
    </tr>
    <tr>
      <td><input type="button" value="０" onClick="calc('0')"></td>
      <td><input type="button" value="．" onClick="calc('.')"></td>
      <td><input type="button" value="＋" onClick="calc('+')"></td>
      <td><input type="button" value="＝" onClick="calc('=')"></td>
    </tr>
  </table>
</form>

</body>
</html>

CSS

#calcTable{
  text-align:center;
  color:#fff;
}

–	関連記事
1	Javascript入門