JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>電卓</title>
    <スタイル>
        .op {
            マージン: 50px 自動;
            幅: 300ピクセル;
            高さ: 300px;
            境界線: 1px 実線オレンジ;
            背景色: ライトスカイブルー;
            境界線の半径: 50px;
        }

        入力{
            幅: 210ピクセル;
            高さ: 30px;
            境界線の半径: 5px;
        }

        ボタン {
            幅: 30ピクセル;
            高さ: 30px;
            境界線の半径: 10px;
        }
    </スタイル>
</head>
<本文>
<div class="op">
    <h2 align="center">計算機</h2>
    <フォーム名="計算機">
        <テーブルの位置合わせ="center">
            <tr>
                <td>数値1:</td>
                <td><入力タイプ="テキスト" 名前="num1"></td>
            </tr>
            <tr>
                <td>数値2:</td>
                <td><入力タイプ="テキスト" 名前="num2"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button">+</button>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button">-</button>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button">*</button>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <ボタンタイプ="ボタン">/</ボタン>
                </td>
            </tr>
            <tr>
                <td>結果:</td>
                <td><input type="text" name="result" 無効></td>
            </tr>
        </テーブル>
    </フォーム>
</div>
<スクリプト>
    //タグ名の下にあるすべての要素オブジェクトを取得し、配列を返します。let buttonArr = document.getElementsByTagName("button");
    for (let but of buttonArr) {
        but.addEventListener('click', 関数() {
            演算子 = this.innerHTML;
            count(演算子);
        });
    }

    関数 count(演算子) {
        // num1 という名前のフォーム計算機の入力値を取得します。let num1 = parseFloat(document.calculator.num1.value);
        num2 = parseFloat(document.calculator.num2.value); とします。
        結果を '' とします。
        スイッチ（演算子）{
            ケース '+':
                結果 = num1 + num2;
                壊す;
            場合 '-'：
                結果 = num1 - num2;
                壊す;
            場合 '*'：
                結果 = num1 * num2;
                壊す;
            場合 '/'：
                （数値2 == 0）の場合{
                    alert("除数はゼロにできません");
                    戻る;
                }
                結果 = num1 / num2;
                壊す;
        }
// 結果を属性名 result を持つ入力ボックスに割り当てます。 document.calculator.result.value = result;
    }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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