ホームページ > 記事 > ウェブフロントエンド > 再帰アルゴリズムに基づく Web 電卓の JS 実装の詳細な説明

再帰アルゴリズムに基づく Web 電卓の JS 実装の詳細な説明

小云云オリジナル: 2017-12-21 14:29:461656ブラウズ

この記事では、主に再帰に基づいて Web バージョンの電卓を実装するための JS の方法を紹介し、JavaScript で再帰アルゴリズムを使用して Web バージョンの電卓を実装する手順と関連する操作テクニックを例の形で分析します。必要な友達が参考になれば幸いです。

Web バージョンの電卓を再帰的に実装すると、コードを簡素化できます。

1. CSS+html は、電卓の外観を実装し、number(z) イベントを各ボタンにバインドし、その差分を渡します。 z を使用して、イベントをトリガーするボタンを識別します。

c9ccee2e6ea535a969eb3f532ad9fe89頭に入れてください

この p は、電卓の HTML であるボディに置かれ、異なる数値を渡すことでトリガーボタンを区別します。

<p class="bg">
 <p id="txt"></p>
 <button id="bt10" value="+">+</button>
 <button id="bt11" value="-">-</button>
 <button id="bt12" value="*">*</button>
 <br data-filtered="filtered"><button id="bt13" value="/">/</button>
 <button id="bt14" value="=">=</button>
 <br data-filtered="filtered"><button id="bt1" value="1">1</button>
 <button id="bt2" value="2">2</button>
 <button id="bt3" value="3">3</button>
 <br data-filtered="filtered"><button id="bt4" value="4">4</button>
 <button id="bt5" value="5">5</button>
 <button id="bt6" value="6">6</button>
 <br data-filtered="filtered"><button id="bt7" value="7">7</button>
 <button id="bt8" value="8">8</button>
 <button id="bt9" value="9">9</button> 
</p>

2.number(z) メソッドでは、DOM の innerHTML を使用して式のリアルタイム表示を実現し、文字列コンテンツを使用してクリックされた数値または記号を保存します。「=」をクリックすると、fact(content)が計算されます。

コードは次のとおりです:

var content; //存储已点击的数字或符号，要定义成全局的，如果定义在number()中，每次content都会被重新赋值
function number(z) {
  var k=document.getElementById("txt");//获取显示框的 DOM，并缓存在k中
  if(z==14){//如果点击了"="号
   var sum = fact(content);//调用fact()进行计算，并把结果赋值给sum
   content=content+"="+sum;//在要显示的内容后加入"="和sum
   k.innerHTML = content;
   content = null;//将content清空，准备下次计算
  }else{
  //如果没有点击"="号，而是点击的运算符，就需要通过switch把数字转化成运算符
   switch(z){
    case 10: z = &#39;+&#39;; break;
    case 11: z = &#39;-&#39;; break;
    case 12: z = &#39;*&#39;; break;
    case 13: z = &#39;/&#39;; break;
   }
   //把此时输入的字符存入content
   if(content){
    content+=z.toString();
   }else{
    content=z.toString();
   }
   k.innerHTML = content;//让它实时显示
  }
}

3. この計算機の再帰アルゴリズムのアイデア: fact(content) で、最初に content を使用します。 .indexOf("+ ") 「+」記号が存在するかどうかを確認します。存在する場合は、インデックスの前後の 2 つの文字列を再帰的に呼び出し、すべての文字列で「+」が見つからなくなるまでそれらを加算します。 using content.lastIndexOf("-") 以降の操作は、プラス記号と同じです。存在する場合は、インデックスの前後の 2 つの文字列を再帰して減算します。減算の符号が見つからなくなるまで、乗算の符号と除算の符号の判定を開始し、parseFloat(content) を返します。ここでの内容は再帰呼び出し後の符号なし文字列です。冒頭で紹介したパラメータ。 fact(content)中，先用content.indexOf("+")判断"+"号是否存在，若存在，则分别递归调用index前后的两个字符串，并让其相加，直到所有串中都找不到"+"后，开始用content.lastIndexOf("-")判断"-"号，后续操作和加号一样，存在则递归index前后的两个字符串，并让其相减，直到找不到减号，就开始判断乘号和除号，直到没有符号后返回parseFloat(content)，这里的content是递归调用后的无符号字符串，并不是最开始引入的参数了。

//实现递归计算
function fact(content){
 var index = content.indexOf("+");//获取"+"号的index
 if(index != -1){
  return fact(content.substring(0,index))+fact(content.substring(index+1));
  //当找得到“＋”号时，分成两部分相加递归
 }else{
  var index2 = content.lastIndexOf("-");//当找不到“＋”号时，开始找“－”号
  if(index2 != -1){
   return fact(content.substring(0,index2))-fact(content.substring(index2+1));
   //当找得到“－”号时，分成两部分相减递归
  }else{
   var index3 = content.indexOf("*");//当找不到“－”号时，开始找“＊”号
   if(index3 != -1){
    return fact(content.substring(0,index3))*fact(content.substring(index3+1));
    //当找得到“＊”号时，分成两部分相乘递归
   }else{
    var index4 = content.lastIndexOf("/");//当找不到“＊”号时，开始找“/”号
    if(index4 != -1){
     return fact(content.substring(0,index4))/fact(content.substring(index4+1));
     //当找得到“/”号时，分成两部分相除递归
    }else{
     return parseFloat(content);//当找不到“/”号时，返回这段串的变成float型的数值
    }
   }
  }
 }
}

以上是全部代码，设计思路中要注意的两点是：

1、加号和乘号用的indexOf()，而减号和除号用的lastIndexOf()。

举个例子：content="3－2－1"

它如果用indexOf()rrreee上記はコード全体です。設計上の注意点は次の 2 つです。 1. プラス記号と乗算記号は indexOf() を使用します。 lastIndexOf() の符号と除算符号の使用。例: content="3-2-1"

indexOf() を使用する場合は、まず文字列を fact("3")-fact("2-1") に分割します)、最初の "3" は符号なし、ファクトが再帰的に呼び出されるときは parseFloat("3") が返され、後続の再帰呼び出しが行われると parseFloat("2")-parseFloat になります。 ("1")＝1 、これは

fact("2-1")

の戻り値で、最終結果は 2 で、これは 3-(2-1) と同等です。

lastIndexOf()を使用すると、文字列が

fact("3-2")-fact("1")

に分割され、

fact("3-2")

の戻り値は

parseFloatになります("3" )-parseFloat("2")=1

となり、左から右への計算が実現します。

除算記号にも同じことが当てはまります。content="6/3/2" でindexOf() を使用する場合、プラス記号には順序の問題がないため、6/(3/2) と同等になります。乗算記号なので、indexOf( ) を使用できます。

2. 掛け算と割り算は判断の内層にあり、足し算と引き算は判断の外層にあります。

乗算と除算は最初に計算する必要があるため、内部の判断は最初に符号なしの文字列を取得し、それを最初に計算します。

個人的には、この計算機は最適化できると思います: (それについて考えることもできます)1. イベントをボタンにバインドするときは、イベントプロキシモードを使用します。

2. どのプロパティまたはメソッドを使用するかについては、ブラウザーの互換性の問題を考慮する必要があります。

最初は 2 つの数値の加算、減算、乗算、除算を行うための非再帰的な計算機を作成しました。その後改良すると、複数の数値を計算するようになり、考えるのがより複雑になりました。再帰的に記述すると、コードのサイズが以前よりも小さくなり、読みやすくなり、考えるのも難しくなくなります。興味のある方はぜひ試してみてください。

再帰アルゴリズムに基づく Web 電卓の JS 実装の詳細な説明

関連記事