オリジナルJavascriptを使って計算機の実例コードを開発します。

14071 ワード
js。 計算機 原生
計算機の主な役割は、デジタル演算を行い、計算機機能のwebインスタンスを開発することであり、jsベースの数字演算能力をよりよく把握することに役立つ。
この例では、js計算機の開発手順を詳しく分析します。本教程を勉強する時、まず基礎的なjs知識を備えたほうがいいです。
計算機は、数字領域とボタン領域の両方を表示します。まず、計算機のこの二つの領域のhtml要素を作成してください。以下のようになります。

<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="Clear">C</div><!--  -->
 <div class="btn" data-key="Negate">±</div><!--    -->
 <div class="btn" data-key="Square">√￣</div><!--   -->
 <div class="btn" data-key="Num" data-value="7">7</div><!--7-->
 <div class="btn" data-key="Num" data-value="8">8</div><!--8-->
 <div class="btn" data-key="Num" 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="Num" data-value="4">4</div><!--4-->
 <div class="btn" data-key="Num" data-value="5">5</div><!--5-->
 <div class="btn" data-key="Num" 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="Num" data-value="1">1</div><!--1-->
 <div class="btn" data-key="Num" 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><!--  -->
 <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{width:240px;height:360px;padding:10px;margin:30px auto;border:1px solid #8acceb;background:#d1f1ff;}
 .calculator_wrap .show_num{position:relative;padding:0 8px;height:60px;background:#fff;text-align:right;}
 .calculator_wrap .show_m{position: absolute;left:10px;bottom:3px;display:none;}
 .calculator_wrap .num_save{height:26px;line-height:26px;font-size:12px;white-space:nowrap;}
 .calculator_wrap .num_cur{font-size:28px;height:34px;line-height:34px;}
 .calculator_wrap .btn_wrap{font-size: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{position:absolute;height:90px;line-height:90px;}
 .calculator_wrap .zero{width:90px;}
初心者にとっては、計算機の機能が複雑に見えるので、ボタンや計算方法が多くて、どうやって始まりますか？実際には、任意の機能は、アイデアを明確にするために必要なだけで、コードを作成して一歩ずつ、実現するのは難しくないことがわかります。
1.各html要素を取得する
webフロントエンドは、ページ上で何をするにも、まずページ上の各DOM要素を取得します。計算機全体のボタンが多いように見えますが、実際の開発ではイベントエージェントを使ってボタンを操作することができますので、すべてのボタンのコンテナ要素だけを取得すればいいです。コードは以下の通りです

//      
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');
2関連変数を宣言する
演算には、補助的な計算、結果と判断などの変数が必要です。

//    
var sStep = '';
//    
var sCurValue = '0';
//    
var nResult = null;
//   
var sMark = '';
//MR      
var nMvalue = 0;
//    。false:         ;true:           ;
var bLogStatus = false;
3ボタンにクリックイベントを追加します。
全体の計算機のボタンが多いため、各ボタンを単独で一つのイベントに結びつけるのは多すぎて、煩雑で、性能に影響して、しかも間違いやすいです。先ほどはキーの外部容器eCalculatorだけを取得しました。
イベントエージェントを再利用すると、コンテナにクリックイベントを追加し、現在クリックしているボタンがどれかを判断し、対応する計算を実行すればいいです。マウスでボタンを押すと、点が速すぎてボタンの文字が選択される可能性があります。このため、外注容器に標準動作を阻止するための操作コードを追加する必要があります。

//            ，        
eCalculator.addEventListener('mousedown',function(event){
 //            ，             
 event.preventDefault();
});

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

});
3.1クリックのボタンと値を取得する
イベント関数から入ってきたイベントパラメータにより、マウスクリックの要素が得られます。また、元素上のdata-keyとdata-value属性を通じて、マウスのクリックはどれのボタンとその値かを判断します。以下の通りです。

eBtnWrap.addEventListener('click',function(event){
 //       
 var eTarget = event.target;
 //      
 var key = eTarget.dataset.key;
 //      
 var value = eTarget.dataset.value;
});
3.2キーと値を判断し、数字キーと小数点で入力操作を行う
ボタン属性がdata-keyであれば'Num'は押した数字を表し、'Point'は小数点を表します。
これらのボタンは入力を実行します。数字が複数あるので、数字を入力してfnInputNum関数に入れます。fnShow Result関数を再パッケージして、データを表示デジタル領域に表示します。以下の通りです

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

 //          
 if(key){
 // switch                
 switch(key){
  //       
  case 'Num':
  fnInputNum(value);
  break;
  //     
  case 'Point':
  //         ，             
  if(sCurValue.indexOf('.')==-1){
   sCurValue = sCurValue + '.';
   bLogStatus = true;
  }
  break;
 }
 //           
 fnShowResult();
 }
});
//    
function fnInputNum(num){
 //                          
 if(bLogStatus){
 sCurValue = sCurValue + num;
 }else{
 //          0
 if(num!=0){
  bLogStatus = true;
 }
 sCurValue = num;
 }
}
//      
function fnShowResult(){
 //      
 eNumSave.innerHTML = sStep;
 //       
 if(sCurValue.length>14){
 sCurValue = sCurValue.slice(0,14);
 }
 //      
 eNumCur.innerHTML = sCurValue;
}
この時は数字と小数点をクリックして、計算機のディスプレイに入力します。

3.3加減乗除演算
計算機の基本は加減乗除です。数値を加減乗除して結果を計算する機能を実現するために、パッケージfnCount Resoult、fnBaseCount、fnEqualの3つの関数。
fnCount Resultは演算子に基づいて結果を計算するために使用されます。
fnBaseCountは計算式または計算結果を修正します。
fnEqualは、=番号を押すと結果を計算し、データをリセットします。以下の通りです

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

 //          
 if(key){
 // switch                
 switch(key){
  /* … */
  //        
  case 'Base':
  fnBaseCount(value);
  break;
  //  
  case 'Equal':
  fnEqual();
  break;
 }
 //           
 fnShowResult();
 }
});
//    
function fnCountResult(){
 //            
 switch(sMark){
 case '+':
  nResult = nResult===null?+sCurValue:nResult + (+sCurValue);
  break;
 case '-':
  nResult = nResult===null?+sCurValue:nResult - sCurValue;
  break;
 case '*':
  nResult = nResult===null?+sCurValue:nResult * sCurValue;
  break;
 case '/':
  nResult = nResult===null?+sCurValue:nResult / sCurValue;
  break;
 default:
  nResult = +sCurValue;
 }
}
//        
function fnBaseCount(key){
 //       ,    
 if(bLogStatus){ 
 //      
 bLogStatus = false;
 //    
 sStep = sStep + ' ' + sCurValue + ' ' + key;
 //    
 fnCountResult();
 sCurValue = ''+nResult;
 }else{
 //      ,       
 if(sStep==''){ 
  sStep = sCurValue + ' ' + key;
 }else{ //      ,        
  sStep = sStep.slice(0,sStep.length-1) + ' ' + key;
 }
 }
 //     ,    
 sMark = key;
}
//  
function fnEqual(){
 //       ，      
 if(sMark=='')return;
 //    
 fnCountResult();
 sCurValue = ''+nResult;
 //    
 sStep = '';
 sMark = '';
 bLogStatus = false;
}
計算機で加減乗除の計算ができます。

3.4他のキーに操作を追加します。コードは下記の通りです。

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

 //          
 if(key){
 // switch                
 switch(key){
  /* … */

  //  
  case 'Clear':
  fnClear()
  break;
  //  
  case 'BACK':
  fnBack();
  break;
  //CE
  case 'CE':
  //        
  sCurValue = '0';
  bLogStatus = false;
  break;
  //  
  case 'Negate':
  //      
  sCurValue = ''+(-sCurValue);
  break;
  //    
  case 'Square':
  //        
  nResult = Math.sqrt(+sCurValue);
  //       
  sCurValue = ''+nResult;
  sStep = '';
  sMark = '';
  bLogStatus = false;
  break;
  //  
  case 'Reciprocal':
  //       
  //       
  nResult = 1/sCurValue;
  sCurValue = ''+nResult;
  sStep = '';
  sMark = '';
  bLogStatus = false;
  break;
  //M  
  case 'MC':
  //      
  nMvalue = 0;
  fnShowM()
  break;
  case 'MR':
  //      
  sCurValue = '' + nMvalue;
  fnShowM()
  break;
  case 'MS':
  //          
  nMvalue = +sCurValue;
  fnShowM()
  break;
  case 'MA':
  //           
  nMvalue += +sCurValue;
  fnShowM()
  break;
  case 'ML':
  //            
  nMvalue -= +sCurValue;
  fnShowM()
  break;
 }
 //           
 fnShowResult();
 }
});
//  
function fnClear(){
 //       
 sStep = '';
 sCurValue = '0';
 nResult = null;
 sMark = '';
 bLogStatus = false;
}
//  
function fnBack(){
 //            
 if(bLogStatus){
 //         
 sCurValue = sCurValue.slice(0,sCurValue.length-1);
 //           (-)，  0，       false，     
 if(sCurValue==''||sCurValue=='-'){
  sCurValue = '0';
  bLogStatus = false;
 }
 }
}
//     M    
function fnShowM(){
 bLogStatus = false;
 //            
 eShowM.style.display = nMvalue==0?'none':'block';
}
4結合キーボードイベント
ここで計算機は正常に使えます。ただし、マウスでボタンを押すだけで操作効率が悪く、計算機をより速く使うためには、キーボードイベントを追加して対応ボタンを押すと、次のように操作が行われます。

//    
document.addEventListener('keyup',function(event){
 //        
 var key = event.key;
 //    code
 var code = event.keyCode;
 //               
 var comply = false;
 //    
 if((code>=48&&code<=57)||(code>=96&&code<=105)){
 fnInputNum(key);
 comply = true;
 }
 //    
 if( key=='*'||key=='+'||key=='/'||key=='-'){
 fnBaseCount(key);
 comply = true;
 }
 //esc 
 if(code==27){
 fnClear();
 comply = true;
 }
 //   
 if(code==13){
 fnEqual();
 comply = true;
 }
 //   
 if(code==8){
 fnBack();
 comply = true;
 }
 if(comply){
 //          
 fnShowResult();
 }
});
簡単な計算機が完成します。学習を目的とするなら、直接にコードやコメントを手動で入力して印象を深め、学習効果を高めることをお勧めします。
締め括りをつける
ここでは、元のJavascriptを使った計算機の開発に関する記事を紹介します。もっと多くの関連元のjs開発計算機の内容は私達の以前の文章を検索してください。または次の関連記事を引き続きご覧ください。これからもよろしくお願いします。
ワードプレスのjsライブラリ集合研究紹介
実例の練習ASP+XMLプログラミングは全体の第1/2ページになりました。