シンプルな計算機を実装する JavaScript コード

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

数時間かけて編集し、シンプルでわかりやすい計算機を開発しました。バグを修正し続け、ついに修正できました。

これがスタイルだ

これはCSSの部分です

<スタイル>
  ＃箱 {
   背景画像: 線形グラデーション(120度, #84fab0 0%, #8fd3f4 100%);
   幅: 500ピクセル;
   高さ: 420px;
   マージン: 自動;
   上マージン: 200px;
   位置: 相対的;
  }

  .reckon {
   幅: 280ピクセル;
   高さ: 200px;
   背景画像: 線形グラデーション(120度, #d4fc79 0%, #96e6a1 100%);
   ;
   位置: 絶対;
   上: 100px;
   左: 100px;
   境界線: 5px 実線 #2a2b2c
  }

  #入力1 {
   背景画像: linear-gradient(上へ、#cfd9df 0%、#e2ebf0 100%);
   境界線: なし;
   幅: 220ピクセル;
   高さ: 8px;
   フロート: 右;
   上マージン: 10px;
   右マージン: 20px;
   アウトライン: なし;
   パディング: 10px
  }

  ul li {
   フロート: 左;
   リストスタイル: なし;
   マージン: 4px 2px;
   境界線の半径: 3px;
   背景画像: 線形グラデーション(120度, #a1c4fd 0%, #c2e9fb 100%);
   ボックスシャドウ: 2px 2px #ccc;
   色: #fff;
   font-weight: "楷体";
   幅: 50px;
   高さ: 30px;
   テキスト配置: 中央;
   行の高さ: 30px;
  }

  ul {
   上マージン: 5px;
  }

  ul li:hover {
   不透明度: 0.7;
  }
</スタイル>

これはHTML部分です

<div id="ボックス">
  <div class="reckon" id="reckon">
   <入力タイプ="テキスト" id="入力1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>
/* シンボルと最初の値を格納するための 2 つのラベルを定義します */
 <input type="text" id="text1" style="display:none">
 <input type="text" id="per" style="display:none">

HTML 部分では、すべての数値をクラス名として定義し、すべての演算子をクラスとして定義し、演算子を格納するための 2 つの入力を定義します。

<スクリプト>
  lis = document.querySelectorAll("#box ul .num")//すべての数字を取得 opcr = document.querySelectorAll("#box ul .opcr")//演算子を取得 for (var i = 0; i < lis.length; i++) { //すべての数字を走査 lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML) //input1をクリックして表示します}
  }
  //すべての演算子を走査します for (let i = 0; i < opcr.length; i++) {
   opcr[i].onclick = 関数 () {
    if (text1.value == ""){//最初の値が空の場合 text1.value = input1.value//最初の値を保存します input1.value = "" //入力ボックスの値は空です per.value = this.innerHTML; //シンボルの値は空です } else {
     text1.value = eval(text1.value + per.value + input1.value) // 空でない場合の計算 per.value = this.innerHTML; // クリックされた値としてシンボル値を保存します input1.value = "" // 入力ボックスの値は空です}
   }
  }
  //resule.onclick = function () {に等しい
   input1.value = eval(text1.value + per.value + input1.value) // 内部の値を計算します per.value = "" // per に格納されている値をクリアします text1.value = "" // 入力ボックス内の値は空です}
  //クリックするとすべてクリアされます returnZero.onclick = function () {
   入力1.値 = ""
   パー値 = ""
   テキスト1.値 = ""
  }
</スクリプト>

セクションを完了

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <meta http-equiv="X-UA-compatible" content="ie=edge">
 <title>シンプルな電卓</title>
 <スタイル>
  ＃箱 {
   背景画像: 線形グラデーション(120度, #84fab0 0%, #8fd3f4 100%);
   幅: 500ピクセル;
   高さ: 420px;
   マージン: 自動;
   上マージン: 200px;
   位置: 相対的;
  }

  .reckon {
   幅: 280ピクセル;
   高さ: 200px;
   背景画像: 線形グラデーション(120度, #d4fc79 0%, #96e6a1 100%);
   ;
   位置: 絶対;
   上: 100px;
   左: 100px;
   境界線: 5px 実線 #2a2b2c
  }

  #入力1 {
   背景画像: linear-gradient(上へ、#cfd9df 0%、#e2ebf0 100%);
   境界線: なし;
   幅: 220ピクセル;
   高さ: 8px;
   フロート: 右;
   上マージン: 10px;
   右マージン: 20px;
   アウトライン: なし;
   パディング: 10px
  }

  ul li {
   フロート: 左;
   リストスタイル: なし;
   マージン: 4px 2px;
   境界線の半径: 3px;
   背景画像: 線形グラデーション(120度, #a1c4fd 0%, #c2e9fb 100%);
   ボックスシャドウ: 2px 2px #ccc;
   色: #fff;
   font-weight: "楷体";
   幅: 50px;
   高さ: 30px;
   テキスト配置: 中央;
   行の高さ: 30px;
  }

  ul {
   上マージン: 5px;
  }

  ul li:hover {
   不透明度: 0.7;
  }
 </スタイル>
</head>

<本文>
 <div id="ボックス">
  <div class="reckon" id="reckon">
   <入力タイプ="テキスト" id="入力1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>

 <input type="text" id="text1" style="display:block">
 <input type="text" id="per" style="display:block">

 <スクリプト>
  lis = document.querySelectorAll("#box ul .num")//すべての数字を取得 opcr = document.querySelectorAll("#box ul .opcr")//+——*/を取得
  for (var i = 0; i < lis.length; i++) { //すべての数字を走査 lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML) //input1をクリックして表示します}
  }

  // すべての +——* を走査します/
  (i = 0 とします; i < opcr.length; i++) {
   opcr[i].onclick = 関数 () {
    if (text1.value == ""){//最初の値が空の場合 text1.value = input1.value//最初の値を保存します input1.value = "" //入力ボックスの値は空です per.value = this.innerHTML; //シンボルの値は空です } else {
     text1.value = eval(text1.value + per.value + input1.value) // 空でない場合の値を計算します per.value = this.innerHTML; // シンボルの値はクリックされた値です input1.value = "" // 入力ボックスの値は空です}
   }
  }
  //resule.onclick = function () {に等しい
   input1.value = eval(text1.value + per.value + input1.value) // 内部の値を計算します per.value = "" // per に格納されている値をクリアします text1.value = "" // 入力ボックス内の値は空です}
  //クリックするとすべてクリアされます returnZero.onclick = function () {
   入力1.値 = ""
   パー値 = ""
   テキスト1.値 = ""
  }
 </スクリプト>
</本文>
</html>

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

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