ネイティブ JavaScript を使用して計算機のサンプル コードを開発する

<div class="calculator_wrap" id="calculator"><!--計算機アウトソーシング要素-->
 <div class="show_num"><!--番号領域を表示-->
 <div class="num_save" id="numSave"></div><!--計算式-->
 <div class="num_cur" id="numCur">0</div><!--計算結果-->
 <div class="show_m" id="showM">M</div><!--メモリストレージロゴ-->
 </div>
 <div class="btn_wrap" id="btnWrap"><!--ボタン領域-->
 <div class="btn" data-key="MC">MC</div><!--メモリクリア-->
 <div class="btn" data-key="MR">MR</div><!--メモリ読み取り-->
 <div class="btn" data-key="MS">MS</div><!--ストレージ メモリ-->
 <div class="btn" data-key="MA">M+</div><!--メモリプラス-->
 <div class="btn" data-key="ML">M-</div><!--メモリ削減-->
 <div class="btn" data-key="BACK">←</div><!--バックスペース-->
 <div class="btn" data-key="CE">CE</div><!--現在の内容をクリア-->
 <div class="btn" data-key="クリア">C</div><!--クリア-->
 <div class="btn" data-key="Negate">±</div><!--正負の変換-->
 <div class="btn" data-key="Square">√￣</div><!--平方根-->
 <div class="btn" data-key="数値" data-value="7">7</div><!--7-->
 <div class="btn" data-key="数値" data-value="8">8</div><!--8-->
 <div class="btn" data-key="数値" data-value="9">9</div><!--9-->
 <div class="btn" data-key="Base" data-value="/">/</div><!-- 除く -->
 <div class="btn" data-key="Percentage">%</div><!--パーセント記号-->
 <div class="btn" data-key="数値" data-value="4">4</div><!--4-->
 <div class="btn" data-key="数値" data-value="5">5</div><!--5-->
 <div class="btn" data-key="数値" data-value="6">6</div><!--6-->
 <div class="btn" data-key="Base" data-value="*">*</div><!--乗算-->
 <div class="btn" data-key="Reciprocal">1/x</div> <!--カウントダウン-->
 <div class="btn" data-key="数値" data-value="1">1</div><!--1-->
 <div class="btn" data-key="数値" data-value="2">2</div><!--2-->
 <div class="btn" data-key="Num" data-value="3">3</div><!--3-->
 <div class="btn" data-key="Base" data-value="-">-</div><!--マイナス-->
 <div class="btn equal" data-key="Equal">=</div><!--Equal-->
 <div class="btn zero" data-key="Num" data-value="0">0</div><!--0-->
 <div class="btn" data-key="Point">.</div><!--小数点-->
 <div class="btn" data-key="Base" data-value="+">+</div><!--追加-->
 </div>
</div>

.calculator_wrap{幅:240px;高さ:360px;パディング:10px;マージン:30px 自動;境界線:1px 実線 #8acceb;背景:#d1f1ff;}
 .calculator_wrap .show_num{位置:相対;パディング:0 8px;高さ:60px;背景:#fff;テキスト配置:右;}
 .calculator_wrap .show_m{位置: 絶対;左: 10px;下: 3px;表示: なし;}
 .calculator_wrap .num_save{高さ:26px;行の高さ:26px;フォントサイズ:12px;空白:nowrap;}
 .calculator_wrap .num_cur{フォントサイズ:28px;高さ:34px;行の高さ:34px;}
 .calculator_wrap .btn_wrap{フォントサイズ:0px;}
 .calculator_wrap .btn{display:inline-block;width:38px;height:38px;line-height:38px;text-align:center;border:1px solid #ccc;background:#666;color:#fff;font-size:14px;margin:10px 10px 0 0;cursor:pointer;}
 .calculator_wrap .btn:hover{background:#333;}
 .calculator_wrap .btn:nth-child(5n){margin-right:0px;}
 .calculator_wrap .equal{位置:絶対;高さ:90px;行の高さ:90px;}
 .calculator_wrap .zero{幅:90px;}

// アウトソーシングされた要素を取得します var eCalculator = document.getElementById('calculator');
//計算データ（数式）コンテナーを保存します。var eNumSave = document.getElementById('numSave');
//現在のデジタル コンテナー var eNumCur = document.getElementById('numCur');
//イベント プロキシに使用されるボタンの外部コンテナー var eBtnWrap = document.getElementById('btnWrap');
//メモリ保存フラグ要素 var eShowM = document.getElementById('showM');

//計算式 var sStep = '';
//現在の数値 var sCurValue = '0';
//計算結果 var nResult = null;
//演算子 var sMark = '';
//MR メモリ保存データ var nMvalue = 0;
//入力ステータス。 false: 元の数値を置き換える入力数値。true: 元の数値に追加する入力数値。
var bLogStatus = false;

//アウトソーシングコンテナは、テキストが選択されないようにマウスダウンイベントを追加します。eCalculator.addEventListener('mousedown',function(event){
 // ボタンが速くクリックされたときにテキストが選択されないように、マウスが押されたときのデフォルトの動作を防止します。event.preventDefault();
});

//ボタンコンテナは、すべてのボタン操作をプロキシするためにクリックイベントを追加します eBtnWrap.addEventListener('click',function(event){

});

eBtnWrap.addEventListener('click',function(event){
 //クリックされた要素を取得します。var eTarget = event.target;
 //押されたキーを判断する var key = eTarget.dataset.key;
 //押された値を取得します。var value = eTarget.dataset.value;
});

eBtnWrap.addEventListener('click',function(event){
 /* … */

 //ボタンがクリックされたかどうかを判定する if(key){
 //switch文を使用して、異なるボタンの対応する操作を決定します switch(key){
  //操作を実行するための数字キー case 'Num':
  fnInputNum(値);
  壊す;
  //小数点演算ケース 'Point':
  //小数点があるかどうかを判定し、小数点1点のみの入力を制限します if(sCurValue.indexOf('.')==-1){
   sCurValue = sCurValue + '.';
   bLogStatus = true;
  }
  壊す;
 }
 //表示番号エリアにデータを表示します fnShowResult();
 }
});
//数値入力関数 fnInputNum(num){
 //入力ステータスに基づいて、現在の番号を置き換えるか、現在の番号の後ろに追加するかを決定します if (bLogStatus) {
 sCurValue = sCurValue + 数値;
 }それ以外{
 //最初の数字が0にならないように制限する
 if(num!=0){
  bLogStatus = true;
 }
 sCurValue = 数値;
 }
}
//計算結果を表示する関数 fnShowResult(){
 //計算式を表示します eNumSave.innerHTML = sStep;
 //数字の合計の長さを制限する if(sCurValue.length>14){
 sCurValue = sCurValue.slice(0,14);
 }
 //現在の数値を表示します eNumCur.innerHTML = sCurValue;
}

eBtnWrap.addEventListener('click',function(event){
 /* … */

 //ボタンがクリックされたかどうかを判定する if(key){
 //switch文を使用して、異なるボタンの対応する操作を決定します switch(key){
  /* … */
  //加算、減算、乗算、除算の基本演算 case 'Base':
  fnBaseCount(値);
  壊す;
  // ケース '等しい':
  fnEqual();
  壊す;
 }
 //表示番号エリアにデータを表示します fnShowResult();
 }
});
//計算結果関数 fnCountResult(){
 //現在の演算子を判断して操作を実行します switch(sMark){
 ケース '+':
  nResult = nResult===null?+sCurValue:nResult + (+sCurValue);
  壊す;
 場合 '-'：
  nResult = nResult===null?+sCurValue:nResult - sCurValue;
  壊す;
 場合 '*'：
  nResult = nResult===null?+sCurValue:nResult * sCurValue;
  壊す;
 場合 '/'：
  nResult = nResult===null?+sCurValue:nResult / sCurValue;
  壊す;
 デフォルト：
  結果 = +sCurValue;
 }
}
//加算、減算、乗算、除算の基本演算 function fnBaseCount(key){
 //入力状態であれば計算を実行する if(bLogStatus){ 
 //入力ステータスを変更します bLogStatus = false;
 //計算式 sStep = sStep + ' ' + sCurValue + ' ' + key;
 //計算結果 fnCountResult();
 sCurValue = ''+nResult;
 }それ以外{
 //数式が空の場合は、最初に元の数値を追加します if(sStep==''){ 
  sStep = sCurValue + ' ' + キー;
 }else{ //既存の数式がある場合は、最後の演算子を変更します sStep = sStep.slice(0,sStep.length-1) + ' ' + key;
 }
 }
 // 計算する演算子を変更します sMark = key;
}
//関数fnEqual(){と等しい
 //演算子がない場合、後続の操作を防止します。if(sMark=='')return;
 //計算結果 fnCountResult();
 sCurValue = ''+nResult;
 //データをリセット sStep = '';
 sMark = '';
 bLogStatus = false;
}

eBtnWrap.addEventListener('click',function(event){
 /* … */

 //ボタンがクリックされたかどうかを判定する if(key){
 //switch文を使用して、異なるボタンの対応する操作を決定します switch(key){
  /* … */

  // クリアケース 'Clear':
  fnクリア()
  壊す;
  //バックスペースの場合 'BACK':
  戻り値
  壊す;
  //CE
  ケース 'CE':
  // 現在表示されている値をクリアします sCurValue = '0';
  bLogStatus = false;
  壊す;
  // 否定 case 'Negate':
  //現在の値が反転されます sCurValue = ''+(-sCurValue);
  壊す;
  // 平方根の場合 'Square':
  //現在の値の平方根を取る nResult = Math.sqrt(+sCurValue);
  //その他のデータの初期化 sCurValue = ''+nResult;
  sステップ = '';
  sMark = '';
  bLogStatus = false;
  壊す;
  //カウントダウンケース「逆数」:
  //現在の値の逆数を取得します //その他のデータの初期化 nResult = 1/sCurValue;
  sCurValue = ''+nResult;
  sステップ = '';
  sMark = '';
  bLogStatus = false;
  壊す;
  //Mシリーズケース「MC」:
  // メモリ値をクリアします nMvalue = 0;
  fnShowM()
  壊す;
  ケース 'MR':
  //メモリ値を表示 sCurValue = '' + nMvalue;
  fnShowM()
  壊す;
  ケース 'MS':
  //メモリ値を現在の値に変更します nMvalue = +sCurValue;
  fnShowM()
  壊す;
  ケース 'MA':
  //現在の値をメモリ値に追加します nMvalue += +sCurValue;
  fnShowM()
  壊す;
  ケース 'ML':
  //メモリ値から現在の値 nMvalue -= +sCurValue を減算します。
  fnShowM()
  壊す;
 }
 //表示番号エリアにデータを表示します fnShowResult();
 }
});
//クリア関数 fnClear(){
 //すべてのデータを初期化します sStep = '';
 sCurValue = '0';
 nResult = null;
 sMark = '';
 bLogStatus = false;
}
//バックスペース関数 fnBack(){
 //バックスペースするには入力モードにする必要があります if (bLogStatus) {
 //値の最後の桁を減算します sCurValue = sCurValue.slice(0,sCurValue.length-1);
 //最後の値が空または負数 (-) の場合は、0 に変更し、入力状態を false にリセットし、バックスペースは許可されません if (sCurValue==''||sCurValue=='-'){
  sCurValue = '0';
  bLogStatus = false;
 }
 }
}
//Mメモリ格納の有無を判定する関数 fnShowM(){
 bLogStatus = false;
 //メモリ格納マークを表示するかどうかを判断します eShowM.style.display = nMvalue==0?'none':'block';
}

//キーボードイベント document.addEventListener('keyup',function(event){
 //現在のキーボードキーを取得します。var key = event.key;
 //キーコードを取得する
 var コード = イベント.keyCode;
 // 表示されるデータを変更するための正しいキーストロークを制限します var comply = false;
 //数値を入力if((code>=48&&code<=57)||(code>=96&&code<=105)){
 fnInputNum(キー);
 準拠 = true;
 }
 //加算、減算、乗算、除算if( key=='*'||key=='+'||key=='/'||key=='-'){
 fnBaseCount(キー);
 準拠 = true;
 }
 //esc キーif(コード==27){
 fnClear();
 準拠 = true;
 }
 //キーを入力if(code==13){
 fnEqual();
 準拠 = true;
 }
 //バックスペースキーif(code==8){
 戻り値
 準拠 = true;
 }
 if(準拠){
 // データを電卓画面に表示します fnShowResult();
 }
});