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

計算機機能を実現する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>

効果画像:

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

以下もご興味があるかもしれません:
  • HTML+JS に基づくシンプルな年齢計算ツールの実装
  • ネイティブ JavaScript を使用した Web 計算機の実装
  • JavaScriptで計算機機能を実現するプロセスの詳細な説明
  • JavaScriptはシンプルな計算機能を実装します
  • シンプルな計算機を実装するためのネイティブ js
  • JavaScript で簡単な計算機を実装する
  • JavaScript を使用した Web 計算機の作成
  • JavaScript の例 - 計算機の実装

<<:  MySQL 20 の高性能アーキテクチャ設計原則 (収集する価値あり)

>>:  Ubuntu 20.04の新バージョンでルートユーザーを使用してシステムにログインする方法の詳細なチュートリアル

推薦する

mysql8.0.11をインストールしてrootパスワードを変更し、navicat for mysqlに接続するアイデアの詳細な説明

1.1. ダウンロード:公式ウェブサイトから zip パッケージをダウンロードします。私は 64 ビ...

TCPソケットSYNキューとAcceptキューの差異分析

まず、「LISTENING」状態の TCP ソケットには 2 つの独立したキューがあることを理解する...

MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明

MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...

Nginxの仕組みの詳細な説明

Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...

CSS 属性値 clear:right が機能しない理由の詳細

clear プロパティを使用してフロートをクリアすることはよくあることであり、clear プロパティ...

Linuxでawkを使用する方法の詳細な説明

awk を学ぶ前に、sed、grep、tr、cut などのコマンドを学んでおく必要があります。これら...

MySQL の最適化: サブクエリの代わりに結合を使用する

サブクエリの代わりにJOINを使用するMySQL はバージョン 4.1 以降で SQL サブクエリを...

VueはSplitを使用して、ユニバーサルドラッグアンドスライドパーティションパネルコンポーネントをカプセル化します。

目次序文始める基本レイアウトデータバインディングイベントバインディング最適化ジッター問題を最適化する...

sqlite を mysql スクリプトに移行する方法

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...

Nacos で MySQL8 を設定する方法

1. MySQLデータベースnacos_configを作成する2. データベース nacos_con...

Docker を使用して Microsoft Sql Server を展開するための詳細な手順

目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...

MySQL Server 8.0.13.0 インストールチュートリアル(画像とテキスト付き)

MySQL 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....

DBeaver を MySQL バージョン 8 以降に接続し、起こりうる問題を解決する方法の詳細な説明

データベース MySQL バージョン 8.0.18 DBeaver.exeをダウンロードするダウンロ...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

CSS の flex と inline-flex の違いの詳細な説明

inline-flex は inline-block と同じです。内部要素用の display:fl...