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

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

計算機の主な機能は数値計算を実行することです。計算機機能の Web インスタンスを開発すると、js の基本的な数値計算機能をよりよく習得するのに役立ちます。

この例では、js 計算機の開発手順を詳細に分析します。このチュートリアルを学習するときは、基本的な js の知識があることが推奨されます。

計算機は、数値表示領域とボタン領域の 2 つの部分で構成されています。まず、計算機のこれら 2 つの領域の 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="クリア">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;}

初心者にとって、電卓の機能はボタンの数が多く、計算方法も複数あるため複雑に思え、どこから始めればよいのかわからないかもしれません。実際、どの機能でも、アイデアを整理してコードを段階的に記述するだけで、実装は難しくないことがわかります。

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 関数にカプセル化されます。次に、fnShowResult 関数をカプセル化して、表示デジタル領域にデータを表示します。以下のように表示されます。

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;
}

この時点で、図に示すように、数字と小数点をクリックして計算機のディスプレイに入力できます。

3.3 加算、減算、乗算、除算

計算機の最も基本的な操作は、加算、減算、乗算、除算です。数値の加算、減算、乗算、除算と結果の計算機能を実装するために、3 つの関数 fnCountResult、fnBaseCount、fnEqual がカプセル化されています。

fnCountResult は演算子に従って結果を計算するために使用されます。

fnBaseCount は計算式または計算結果を変更します。

fnEqual は、= 記号が押されたときに結果を計算し、データをリセットするために使用されます。以下のように表示されます。

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;
}

これで、図に示すように、計算機で加算、減算、乗算、除算を実行できます。

3.4 他のボタンに操作を追加します。コードは次のとおりです。

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';
}

4 キーボードイベントのバインド

これを書き込むと、電卓は正常に使用できるようになります。ただし、マウスでボタンをクリックするだけでは効率的ではありません。電卓をより速く使用するには、キーボード イベントも追加する必要があります。対応するボタンが押されると、以下に示すように操作が実行されます。

//キーボードイベント 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();
 }
});

これで簡単な計算機が完成しました。学習が目的の場合は、コードを直接コピーしないことをお勧めします。コードとコメントを手動で入力すると、印象が深まり、学習効果が向上します。

要約する

ネイティブ JavaScript を使用して計算機を開発する方法に関するこの記事はこれで終わりです。ネイティブ js を使用して計算機を開発することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 豊富なコンテンツと実用的なメソッドを備えた、JavaScript で書かれたシンプルな計算機です。おすすめ
  • 電卓操作を実現するシンプルなjsコード
  • jsはシンプルな計算機を実装します
  • HTML+JS は、シンプルな計算機コード (加算、減算、乗算、除算) を実装します。
  • JS で書かれたシンプルな計算機実装コード
  • javascript の簡単な計算機の実装手順の分解 (画像付き)
  • 計算機機能を実装するための純粋な JavaScript コード (3 つの方法)
  • jsはシンプルな計算機を実装します
  • ウェブ計算機 JS計算機
  • jsウェブ計算機のシンプルな実装

<<:  MySQLのインデックス設計の原則と一般的なインデックスの違いについて簡単に説明します。

>>:  Centos ベースイメージの作成方法

推薦する

MySQLの主キーと外部キーの使用と説明を簡単に説明します

目次1. 外部キー制約外部キーとは何ですか?外部キーを使用する条件:外部キーの定義構文は次のとおりで...

DockerにrockerChatをインストールし、チャットルームを設定するための詳細な手順

包括的なドキュメントgithubアドレスhttps://github.com/RocketChat/...

CentOS7 で ethereum/Ethereum を最初からインストールする

目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...

DockerはRedisを起動し、パスワードを設定します

RedisはRedisバージョン5のapline(Alps)イメージを使用します。これは小さくて高速...

CSSスタイルで実現されるHTML背景色のグラデーション効果

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

スライドドアを実装するための CSS サンプルコード

いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...

docker によってプルされたイメージがどこに保存されるかの詳細な説明

20200804追記:記事の内容に誤りがある可能性があります。他の回答を検索することもできます。 d...

サイバーパンクスタイルのボタンを実現するためのHTML+CSS

まず効果を見てみましょう: 序文:このアイデアは、Bilibili のアップロード者 Steven ...

MYSQL の binlog 最適化に関する考察の要約

質問質問 1: トランザクションをコミットするときに REDO ログをフラッシュすることによって発生...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

一意の注文番号を生成するためのMySQLの高同時実行方法

序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...

VMware 仮想マシンで Linux の IP アドレスを表示する方法

1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...

docker で golang イメージに基づいて ssh サービスを構築する方法

以下は、docker の golang イメージに基づいて ssh サービスを構築するためのコードで...