JavaScript を使って簡単な計算機を書く

効果は以下のとおりです。

参考プログラム:

<!DOCTYPE html>

<html lang="ja">



<ヘッド>

    <メタ文字セット="UTF-8">

    <meta http-equiv="X-UA-compatible" content="IE=edge">

    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

    <title>アナログ計算機</title>

    <スタイル>

        ボタン {

            幅: 39px;

            高さ: 30px;

            背景色: rgb(102, 240, 102);

        }

        ボタン:ホバー{

            背景色: 黒;

            色: rgb(255, 249, 237);

        }



        ボタン:アクティブ{

            背景色: rgb(79, 72, 72);

            色: 白;

        }

        テーブル{

            背景: rgb(192, 248, 109);

        }

    </スタイル>

</head>



<本文>

    <div>

        <表の境界線="1px">

            <tr スタイル="text-align: center;">

                <td colspan="4">

                    <input type="text" id="結果" >

                </td>

            </tr>

            <tr>

                <td><button id="le" onclick="getChar('(')">(</button></td>

                <td><button id="rg" onclick="getChar(')')">)</button></td>

                <td><button id="baifen" onclick="getChar('%')">%</button></td>

                <td><button id="C" onclick="clear1()">C</button></td>

            </tr>

            <tr>

                <td><button id="7" onclick="getChar('7')">7</button></td>

                <td><button id="eight" onclick="getChar('8')">8</button></td>

                <td><button id="9" onclick="getChar('9')">9</button></td>

                <td><button id="divi" onclick="getChar('/')">/</button></td>

            </tr>

            <tr>

                <td><button id="4" onclick="getChar('4')">4</button></td>

                <td><button id="5" onclick="getChar('5')">5</button></td>

                <td><button id="six" onclick="getChar('6')">6</button></td>

                <td><button id="mul" onclick="getChar('*')">*</button></td>

            </tr>

            <tr>

                <td><button id="one" onclick="getChar('1')">1</button></td>

                <td><button id="two" onclick="getChar('2')">2</button></td>

                <td><button id="three" onclick="getChar('3')">3</button></td>

                <td><button id="dec" onclick="getChar('-')">-</button></td>

            </tr>

            <tr>

                <td><button id="zero" onclick="getChar('0')">0</button></td>

                <td><button id="point" onclick="getChar('.')">.</button></td>

                <td><button id="=" onclick="getResult()">=</button></td>

                <td><button id="add" onclick="getChar('+')">+</button></td>

            </tr>

        </テーブル>

    </div>

</本文>

<スクリプト>

    // ボタンをクリックするとボタンの値を返します function getChar(btnid) {

        var btns = document.getElementsByTagName("ボタン")

        スイッチ (btnid) {

            ケース '+':

                setNum('+')

                壊す;

            場合 '。'：

                setNum('.')

                壊す;

            '='の場合:

                setNum('=')

                壊す;

            ケース '0':

                数値を0に設定します

                壊す;

            ケース '1':

                数値を1に設定します

                壊す;

            ケース '2':

                数値を 2 に設定します

                壊す;

            ケース '3':

                数値を3に設定します

                壊す;

            場合 '-'：

                setNum('-')

                壊す;

            ケース '4':

                数値を4に設定します

                壊す;

            ケース '5':

                '5' を設定します

                壊す;

            ケース '6':

                数値を6に設定します

                壊す;

            ケース '7':

                数値を7に設定します

                壊す;

            ケース '8':

                '8' を設定します

                壊す;

            ケース '9':

                数値を9に設定します

                壊す;

            場合 '/'：

                setNum('/')

                壊す;

            場合 '*'：

                setNum('*')

                壊す;

            場合 '（'：

                setNum('(')

                壊す;

            場合 '）'：

                setNum(')')

                壊す;

            場合 '％'：

                setNum('%')

                壊す;

            デフォルト：

                壊す;

        }

    }

    // 表示をクリアする function clear1() {

        document.getElementById("結果").value = ""

    }

    // ディスプレイに値を表示する function setNum(charCode) {

        var origin = document.getElementById('結果');

        origin.value += charCode;

        origin.innerText = origin.value;

    }

    //計算結果関数 getResult(){

        var res = eval(document.getElementById("result").value);

        // '=' を追加

        setNum('=');

        // 結果setNum(res)を追加

    }

</スクリプト>

</html>

注:計算を行うときは、eval 関数を直接使用できます。加算、減算、乗算、除算の計算ロジックを手動で記述する必要がないため、開発が大幅に簡素化されます。

例えば：

var num = eval('3+3')

演算の結果はnum=6です

評価関数の使用法:

構文: eval (パラメータ)、パラメータは js 式、文字列で、既存のオブジェクトの変数とプロパティを含めることができます。

戻り値:

パラメータタイプ	戻り値
整数または関数	整数または関数
文字列（および式）	文字列式を実行した結果
文字列（文または文ブロック）	ステートメントブロックを実行し、undefinedを返します。

JavaScriptを使用して簡単な計算機を作成する方法についての記事はこれで終わりです。JavaScript を使用して簡単な計算機を作成するJavaScriptについての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: