ウェブ計算機を実装するためのjs

HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?

コンピュータには次の機能があります。

コンピュータ全体のフレーム
入力ボックス
入力ボタン

コンピュータ全体のフレーム:

/*div スタイルを設定する*/
 #表示div{
   境界線: 実線 1px;
   境界線の半径: 5px;
   幅: 350ピクセル;
   高さ: 400px;
   テキスト配置: 中央;
   margin: auto;/*中央に設定*/
   上マージン: 50x;
   背景色: rgb(214, 219, 190);    
}

入力ボックス:

/*入力ボックスのスタイルを設定する*/
  入力[タイプ=テキスト]{
      上マージン: 20px;
      幅: 290ピクセル;
      高さ: 40px;
      フォントサイズ: 20px;

}

入力ボタン:

/*ボタンのスタイルを設定する*/
   入力[type=button]{
      幅: 60ピクセル;
      高さ: 60px;
      上マージン: 20px;
      左マージン: 5px;
      右マージン: 5px;
      フォントサイズ: 30px;
      フォントの太さ: 太字;
      フォントファミリー: "楷書";
}

js コードを使用して、対応するビジネスロジック操作を実行します。

<!--js コードを宣言-->
        <スクリプト>
            関数テスト(btn){
                //ボタンオブジェクトを取得します。var number = btn.value;
                //対応するビジネスロジックスイッチ（番号）を実行します{
                    ケース "=":
                        document.getElementById("input").value を eval(document.getElementById("input").value);
                        壊す;
                    ケース「c」:
                        document.getElementById("入力").value="";
                        壊す;
                    デフォルト：
                        //ボタンの値を入力ボックスに割り当てます。 document.getElementById("input").value+=number;
                        壊す;
                }
                
            }
</スクリプト>

コンピュータの組版に HTML を使用する:

<本文>
    <div id="showdiv">
        <input type="text" id="input" readonly="読み取り専用"><br>
        <input type="button" value="1" onclick="テスト(これ)">
        <input type="button" value="2" onclick="test(this)">
        <input type="button" value="3" onclick="テスト(これ)">
        <input type="button" value="4" onclick="test(this)"><br>
        <input type="button" value="5" onclick="テスト(これ)">
        <input type="button" value="6" onclick="テスト(これ)">
        <input type="button" value="7" onclick="テスト(これ)">
        <input type="button" value="8" onclick="test(this)"><br>
        <input type="button" value="9" onclick="test(this)">
        <input type="button" value="+" onclick="テスト(これ)">
        <input type="button" value="-" onclick="test(this)">
        <input type="button" value="*" onclick="test(this)"><br>
        <input type="button" value="0" onclick="テスト(this)">
        <input type="button" value="/" onclick="test(this)">
        <input type="button" value="c" onclick="test(this)">
        <input type="button" value="=" onclick="test(this)">
      


    </div>
</本文>

全体のコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <スタイル>
        /*div スタイルを設定する*/
        #表示div{
            境界線: 実線 1px;
            境界線の半径: 5px;
            幅: 350ピクセル;
            高さ: 400px;
            テキスト配置: 中央;
            margin: auto;/*中央に設定*/
            上マージン: 50x;
            背景色: rgb(214, 219, 190);    
         }
        /*入力ボックスのスタイルを設定する*/
        入力[タイプ=テキスト]{
            上マージン: 20px;
            幅: 290ピクセル;
            高さ: 40px;
            フォントサイズ: 20px;

        }
        /*ボタンのスタイルを設定する*/
        入力[type=button]{
            幅: 60ピクセル;
            高さ: 60px;
            上マージン: 20px;
            左マージン: 5px;
            右マージン: 5px;
            フォントサイズ: 30px;
            フォントの太さ: 太字;
            フォントファミリー: "楷書";
        }
        </スタイル>
        <!--js コードを宣言-->
        <スクリプト>
            関数テスト(btn){
                //ボタンオブジェクトを取得します。var number = btn.value;
                //対応するビジネスロジックスイッチ（番号）を実行します{
                    ケース "=":
                        document.getElementById("input").value を eval(document.getElementById("input").value);
                        壊す;
                    ケース「c」:
                        document.getElementById("入力").value="";
                        壊す;
                    デフォルト：
                        //ボタンの値を入力ボックスに割り当てます。 document.getElementById("input").value+=number;
                        壊す;
                }
                
            }
        </スクリプト>
        
        
    <title>ドキュメント</title>
</head>
<本文>
    <div id="showdiv">
        <input type="text" id="input" readonly="読み取り専用"><br>
        <input type="button" value="1" onclick="テスト(これ)">
        <input type="button" value="2" onclick="test(this)">
        <input type="button" value="3" onclick="テスト(これ)">
        <input type="button" value="4" onclick="test(this)"><br>
        <input type="button" value="5" onclick="テスト(これ)">
        <input type="button" value="6" onclick="テスト(これ)">
        <input type="button" value="7" onclick="テスト(これ)">
        <input type="button" value="8" onclick="test(this)"><br>
        <input type="button" value="9" onclick="test(this)">
        <input type="button" value="+" onclick="テスト(これ)">
        <input type="button" value="-" onclick="test(this)">
        <input type="button" value="*" onclick="test(this)"><br>
        <input type="button" value="0" onclick="テスト(this)">
        <input type="button" value="/" onclick="test(this)">
        <input type="button" value="c" onclick="test(this)">
        <input type="button" value="=" onclick="test(this)">
      


    </div>
</本文>
</html>

結果：