計算機機能を実現するjsバージョン

この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

先生の指導のもと、この簡単な計算機を完成させました。魔法のようなプロセスでした。計算機の基本機能はすべて揃っています。シンプルな電卓ですが、初心者には強い論理的判断能力が必要です。条件がたくさんあります。開発者として、常に設計上のバグを探し、ユーザーのニーズを常に改善する必要があります。これらすべてに明確な論理的推論と判断が必要です。少し圧倒されています。

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <title>電卓</title>
    <スタイル>
        *{
            パディング:0;
            マージン:0;
        }
        テーブル{
            幅:400ピクセル;
            マージン:自動;
            border:1px 純銀色;
            border-collapse: collapse;/*列間の間隔*/
        }
       td {
           幅: 100ピクセル;
           境界線: 1px 実線 #525252;


       }
        td入力{
            幅:98.7%;
            高さ:60px;
            アウトライン: なし;
            テキスト配置: 右;
            フォントサイズ: 20px;
            背景: rgba(251, 255, 227, 0.81);


        }
        td ボタン{
            幅:100%;
            高さ:60px;
            フォントサイズ: 22px;
            背景: rgba(223, 255, 243, 0.81);
        }
    </スタイル>
</head>
<本文>
<テーブル>
    <tr>
        <td colspan="4" ><input id="text" type="text" value="0" /></td>
    </tr>
    <tr>
        <td colspan="2"><button class="btn">削除</button></td>
        <td colspan="2"><button class="btn">c</button></td>
    </tr>
    <tr>
        <td><button class="btn">9</button></td>
        <td><button class="btn">8</button></td>
        <td><button class="btn">7</button></td>
        <td><button class="btn">+</button></td>
    </tr>
    <tr>
        <td><button class="btn">6</button></td>
        <td><button class="btn">5</button></td>
        <td><button class="btn">4</button></td>
        <td><button class="btn">-</button></td>
    </tr>
    <tr>
        <td><button class="btn">3</button></td>
        <td><button class="btn">2</button></td>
        <td><button class="btn">1</button></td>
        <td><button class="btn">*</button></td>
    </tr>
    <tr>
        <td><button class="btn">0</button></td>
        <td><button class="btn">.</button></td>
        <td><button class="btn">=</button></td>
        <td><button class="btn">/</button></td>
    </tr>
</テーブル>
<!--<span id="m">8</span>-->
<スクリプト>
   /* var M = document.getElementById("m");

    コンソールにログ出力します。
    console.log(M.innerText);*/
    //ボタンを取得します var buttonal = document.getElementsByClassName ("btn");
    var textal = document.getElementById("テキスト");
    var res=[]; //入力値を格納する配列を定義します。var label=false;
    for(var i=0;i<buttonal.length;i++){
        ボタン [i].onclick=addclick;
        関数addclick(){
            // 入力は数字または「.」です。
            if(!isNaN(this.innerHTML) || this.innerHTML=="."){
                //テキストボックスの初期値は0ではありません
                ラベル = true;
                if(textal.value!== "0"){
                    //テキストボックスには「.」が含まれています。
                    if(textal.value.indexOf(".")!==-1){
                        //重複ポイントの問題を処理します。テキスト ボックス内にクリックできないポイントがあります (ユーザーが押した数字を追加する必要があり、ユーザーがポイントを押しても追加されない)
                        // "." を入力する場合if(this.innerHTML!== "."){
                            textal.value+=this.innerHTML;
                        }
                    }
                    それ以外{
                        textal.value+=this.innerHTML;
                    }
                }
                //テキストボックスの初期値は0です
                それ以外{
                  if(this.innerHTML == "."){
                      テキスト値 = "0" + this.innerHTML;
                  }
                  それ以外{
                      テキスト値 = this.innerHTML;
                  }
                }
            }
            //数字以外{
              スイッチ(this.innerHTML) {
                  case "+" :これを保存してください。
                            壊す;
                  case "-" :save(this);
                            壊す;
                  case "/" :save(これを);
                            壊す;
                  case "*":これを保存してください。
                            壊す;
                  ケース "=":
                            res.push(テキスト値);
                            var result = eval(res.join(""));
                            if(結果 == "無限大"){
                             remove_add("削除");
                            }
                            textal.value=result==無限大?"除数はゼロにできません":result;
                            //console.log(res.join(""));
                            解像度 = [];
                            壊す;
                  ケース「del」:
                            //後ろから前に向かって数字を 1 つずつ減算します。substr(start,count) substring(start,end) end は取得されません。textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1);
                             壊す;
                  ケース「c」:
                             テキスト値="0";
                            解像度=[];
                            remove_add("追加");
                            壊す;
              }
            }
        }
    }
    関数 save(mini){
        // 画面をクリアする前にユーザーが押した値を保存します // ユーザーが記号を連続して押したか、数字 + 記号を押したかの条件を確認しますif(!label){ // 記号を連続して 2 回押した場合res[res.length-1]=mini.innerHTML; // 2 番目に押された記号が最初の記号に置き換わります}
        それ以外{
            res.push(テキスト値);
            res.push(mini.innerHTML);
        }
        テキスト値="0";
        ラベル=偽;
    }

    //c関数remove_add(p)以外のすべてのイベントをアンロードします{
         for(var i=0;i<buttonal.length;i++){
            if(p == "追加"){
                ボタン[i].onclick = addclick;
            }
            それ以外{
                if(ボタン[i].innerHTML!="c"){
                    ボタン[i].onclick = null;
                }
            }
         }
     }

</スクリプト>
</本文>
</html>

効果画像: