Index

HOME > プログラムTOP > JavaScript


シンプル電卓


　整数の四則演算をするだけのシンプルな機能を持つ電卓です。演算は整数だけにしていますが、結果は小数点以下二位まで表示するようにしています。
電　卓

sasaraan programming

Exposition

■JavaScript コード

// JavaScript ソース
var nTotal = 0;      // 現在の合計値
var nInput = 0;      // 入力中の数値
var sOpe = "+";    // 入力した演算子
var bNum = false;  // 直前のボタンが数字かどうか

// 初期化処理
function InitCalc() {
    nTotal = 0;
    nInput = 0;
    sOpe = "+";
    bNum = false;
}

// 数値ボタン(0...9)のクリック
function NumClick(num) 
{
    // '=' 処理直後の数字入力で初期化処理
    if (!bNum && sOpe == "=") InitCalc();
    // 入力値を算出して表示
    nInput = nInput * 10 + num;
    document.Form1.Text1.value = nInput;
    // 変数の更新
    bNum = true;
}

// 演算子(*/-+=)のクリック
function OpeClick(ope) 
{
    // 直前に押したのが数値の時
    if (bNum) {
        // 合計値を算出
        nTotal = eval(nTotal + sOpe + nInput);
        // 合計値を表示（小数がある時は二位まで表示）
        document.Form1.Text1.value = 
            (nTotal - parseInt(nTotal) != 0)? nTotal.toFixed(2): nTotal;
        // 変数の更新
        nInput = 0;
        bNum = false;
    }
    // 演算子を格納
    sOpe = ope;
}

// クリアボタン(C)のクリック
function ClearClick() 
{
    // 初期化処理
    InitCalc();
    document.Form1.Text1.value = nInput;
}
　上記中、使用している各メソッドの役割は次の通りです
・eval... プログラムとみなして計算結果を取り出す
・parseFloat... 文字列を浮動小数点の値に変換する
・parseInt... 文字列を整数の値に変換する
・toFixed... 小数点以下の桁数を指定する

■CSS / HTMLの記述

/* CSS ソース */
table.calc  {margin:1ex; border:1px solid gray; font-size:14px;}
.calc td     {text-align:center;}
.calc input {width:2em; font-size:14px;} 
<!-- HTML ソース -->
<form name="Form1">
    <table class="calc">
    <tr><td colspan="4" style="background-color:silver;">電　卓</tr>
    <tr>
        <td colspan="3">
            <input type="text" name="Text1" value="0" 
                    style="width:6em; font-family:monospace; text-align:right;">
        <td><input type="button" value="C" onclick="ClearClick()"></tr>
    <tr>
        <td><input type="button" value="7" onclick="NumClick(7)">
        <td><input type="button" value="8" onclick="NumClick(8)">
        <td><input type="button" value="9" onclick="NumClick(9)">
        <td><input type="button" value="÷" onclick="OpeClick('/')"></tr>
    <tr>
        <td><input type="button" value="4" onclick="NumClick(4)">
        <td><input type="button" value="5" onclick="NumClick(5)">
        <td><input type="button" value="6" onclick="NumClick(6)">
        <td><input type="button" value="×" onclick="OpeClick('*')"></tr>
    <tr>
        <td><input type="button" value="1" onclick="NumClick(1)">
        <td><input type="button" value="2" onclick="NumClick(2)">
        <td><input type="button" value="3" onclick="NumClick(3)">
        <td><input type="button" value="−" onclick="OpeClick('-')"></tr>
    <tr>
        <td><input type="button" value="0" onclick="NumClick(0)">
        <td colspan="2">
            <input type="button" value="＝" onclick="OpeClick('=')" style="width:4em">
        <td><input type="button" value="＋" onclick="OpeClick('+')"></tr>
    </table>
</form>

www.sasaraan.net

(c) morijoh