jsはシンプルな計算機を実装します

参考までに、ネイティブjsを使用して簡単な計算機（詳細なコメント付き）を実装します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>ドキュメント</title>
    <スタイル>
      .div {
        幅: 500ピクセル;
        高さ: 600px;
        境界線: 1px 実線 #000000;
        マージン: 自動;
      }
      .divs > 入力 {
        幅: 460ピクセル;
        高さ: 45px;
        左マージン: 18px;
        上マージン: 10px;
        フォントサイズ: 30px;
        背景色: 白;
        テキスト配置: 右;
      }
      .divs > div {
        幅: 100ピクセル;
        高さ: 100px;
        フロート: 左;
        境界線: 1px 実線 #000000;
        左マージン: 18px;
        上マージン: 25px;
        フォントサイズ: 40px;
        行の高さ: 100px;
        テキスト配置: 中央;
        ユーザー選択: なし;
      }
    </スタイル>
  </head>
  <本文>
    <div class="divs">
      <input type="text" value="0" id="input1" 無効 />
      <div class="block">7</div>
      <div class="block">8</div>
      <div class="block">9</div>
      <div class="block">-</div>
      <div class="block">4</div>
      <div class="block">5</div>
      <div class="block">6</div>
      <div class="block">+</div>
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">*</div>
      <div class="block">C</div>
      <div class="block">0</div>
      <div class="block">=</div>
      <div class="block">/</div>
</div>

js:

<スクリプト>
      // クラス名が block であるすべての要素を取得します。 var blocks = document.getElementsByClassName("block");
      // 入力を取得
      var 入力 = document.getElementById("input1");
      //最初の値を宣言する var firstValue = 0,
        ブール値 = false;
      //演算子var型を宣言します。
      (var i = 0; i < ブロック長; i++) {
       //i番目のブロックをクリック
        ブロック[i].onclick = 関数 () {
          //これはクリックされたものを指します。ここでは、これはクリックされるたびに要素を指します。console.log(this);
          //this.innerHTML はクリックされた div の内容を表示します (1、2、3、-、+ など)
          //クリックされた値が数値（NaN または数値）かどうかを判断します
          if (!isNaN(this.innerHTML)) {      
            // bool は最初は false です。bool が false のときは、入力を続けることができます。bool が true のときは、入力は 0 にクリアされます。
            if (ブール) {
              入力値 = "0";
              ブール値 = false;
            }
            // クリックされたコンテンツに入力の値を追加し、先頭の 0 を削除して数値に変換し、文字に変換します。 input.value = Number(input.value + this.innerHTML).toString();
          } それ以外 {
           //クリックかどうかを判断します + - * /if (this.innerHTML !== "C" && this.innerHTML !== "=") {
              //最初の数値をfirstValueに保存します 
              firstValue = Number(入力値);
              //演算子を型に格納する
              タイプ = this.innerHTML;
              //入力の値を0にリセットします
              入力値 = "0";
            } else if (this.innerHTML === "C") { // C をクリックした状況を判断 // すべてリセット firstValue = 0;
              タイプ = 未定義;
              入力値 = "0";
            } else { //クリック状況を判断 = //オペレータスイッチの種類に応じて操作を実行する（type）{
                ケース「+」:
                  input.value = (firstValue + Number(input.value)).toString();
                  壊す;
                場合 "-"：
                  input.value = (firstValue - Number(input.value)).toString();
                  壊す;
                場合 "*"：
                  input.value = (firstValue * Number(input.value)).toString();
                  壊す;
                場合 "/"：
                  // 除数が 0 の場合は input.value をリセットします
                  Number(input.value) === 0の場合、input.value = "0";
                  それ以外
                    input.value = (firstValue / Number(input.value)).toString();
                  壊す;
              }
              //bool が true の場合、「=」をクリックした後、再度入力すると、input.value は 0 になります
              ブール値 = true;
            }
          }
        };
      }

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

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