Apple 電卓の JS 実装

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

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>携帯電話</title>
  <スタイル タイプ="text/css">
   ＃電話{
    位置: 相対的;
    幅: 380ピクセル;
    高さ: 700ピクセル;
    ボックスの影: 1px 1px 10px #808080;
    マージン: 自動;
    境界線の半径: 30px;
   }
   
   .kj{
    位置: 絶対;
    幅: 8px;
    高さ: 60px;
    背景色: 黒;
    右: -8px;
    上:100ピクセル;
   }
   .yl{
    位置: 絶対;
    幅: 8px;
    高さ: 80px;
    背景色: 黒;
    左: -8px;
    上: 85px;
   }
   
   。トップ{
    幅: 120ピクセル;
    高さ: 50px;
    /* ボックスシャドウ: 1px 1px 10px #808080; */
    マージン: 自動;
   }
   
   .mkf{
    フロート: 左;
    幅: 100ピクセル;
    高さ: 10px;
    境界線の半径: 5px;
    背景色: 黒;
    右マージン: 10px;
    上マージン: 20px;
   }
   .sxj{
    フロート: 左;
    幅: 10px;
    高さ: 10px;
    境界線の半径: 5px;
    背景色: 黒;
    上マージン: 20px;
   }
   
   。画面{
    幅: 370px;
    高さ: 600px;
    背景色: 黒;
    マージン: 自動;
   }
   .結果番号{
    高さ: 120px;
    /* パディング上部: 30px; */
   }
   .sp{
    フロート: 右;
    色: 白;
    フォントサイズ: 50px;
    上マージン: 50px;
   }
   
   .num{
    高さ: 480ピクセル;
   }
   
   。鍵{
    幅: 82.5px;
    高さ: 82.5px;
    境界線の半径: 50px;
    背景色: #808080;
    フロート: 左;
    マージン: 5px;
    
    
    テキスト配置: 中央;
    行の高さ: 80px;
    フォントサイズ: 20px;
    色: 白;
   }
   。初め{
    背景色: #B0B0B0;
    色: 黒;
   }
   。2番{
    背景色: オレンジ;
   }
   
   。三番目{
    幅: 175ピクセル;
   }
   
   
   
   
   。家{
    幅: 45px;
    高さ: 45px;
    境界線の半径: 25px;
    背景色: #B0B0B0;
    マージン: 3px 自動 0px 自動;
    
   }
  </スタイル>
 </head>
 <本文>
  <div id="電話">
   <!--電源ボタン-->
   <div class="kj"></div>
   <!--ボリューム-->
   <div class="yl"></div>
   <!-- 電話機の上部 -->
   <div class="top">
    <!-- マイク -->
    <div class="mkf"></div>
    <!-- カメラ -->
    <div class="sxj"></div>
   </div>
   <!-- 画面 -->
   <div class="screen">
    <div class="結果番号">
     <span class="sp">0</span>
    </div>
    
    <div class="num">
     <div class="key first" onclick="clearCompute()">AC</div>
     <div class="key first" onclick="deleteLastNum()">←</div>
     <div class="key first">%</div>
     <div class="key second" onclick="fun('/')">/</div>
     <div class="キー キー番号" onclick="fun(7)">7</div>
     <div class="キー キー番号" onclick="fun(8)">8</div>
     <div class="キー キー番号" onclick="fun(9)">9</div>
     <div class="key second" onclick="fun('*')">*</div>
     <div class="キー キー番号" onclick="fun(4)">4</div>
     <div class="キー キー番号" onclick="fun(5)">5</div>
     <div class="キー キー番号" onclick="fun(6)">6</div>
     <div class="key second" onclick="fun('-')">-</div>
     <div class="キー キー番号" onclick="fun(1)">1</div>
     <div class="キー キー番号" onclick="fun(2)">2</div>
     <div class="キー キー番号" onclick="fun(3)">3</div>
     <div class="key second" onclick="fun('+')">+</div>
     <div class="key third keynum" onclick="fun(0)">0</div>
     <div class="key" onclick="fun('.')">.</div>
     <div class="key second" onclick="compute()">=</div>
    </div>
   </div>
   <!-- ホームボタン -->
   <div class="home">
    
   </div>
  </div>
  <script type="text/javascript">
   var span = document.querySelector(".sp");
   /**
    * @param {オブジェクト} 数値
    * 数字キーボードをクリックして、span タグ内の数字を置き換えます */
   関数fun(num){
    var 値 = span.innerText;
    値 == 0 の場合
     span.innerText = 数値;
    }それ以外{
     span.innerText = span.innerText.concat(num);
    }
   }
   /**
    * 計算結果 */
   関数compute(){
    var 値 = span.innerText;
    var 結果 = eval(値);
    span.innerText = 結果;
   }
   /**
    * 計算領域をクリアして0にリセットします
    */
   関数 clearCompute(){
    span.innerText="0";
   }
   /**
    * 計算エリアの最後の文字を削除します*/
   関数deleteLastNum(){
    var 値 = span.innerText;
    console.log(typeof(値))
    値 == 0 の場合    
    }
    それ以外{
     /**
      * 値は文字列です * zs123
      * バイト: テキストがコンピュータに保存されるとき、バイト単位で保存されます。エンコード セットは文字を特定のバイトに変換し、コンピュータに保存します。 * 文字: 人間が理解できる文字または中国語の文字。 * ab 中国語 aj
      * 
      * 文字列は文字の集合です。文字列は、この文字配列に対して関連する操作を実行できるように、多くの共通メソッドを提供します。*/
     if(値.長さ!=1){
     span.innerText = 値.substring(0,値.length-1)
     }それ以外{
      span.innerText="0";
     }
     
    }
   }
  </スクリプト>
 </本文>
</html>

効果画像: