今回は、JS で再帰を使用して Web ページに簡単な計算機を実装する方法を説明します。ここで実際のケースを見てみましょう。 Web バージョンの電卓を再帰的に実装すると、コードを簡素化できます: 1. CSS+html は電卓の外観を実装し、number(z) イベントを各ボタンにバインドし、イベントをトリガーしたボタンを区別するために z の差を渡します。 頭に入れてください</p> <p style="text-align: left;"> この p は、計算機の HTML である本文に配置され、number() はさまざまな数値を渡すことでトリガー ボタンを区別します。 </p>りー<p style="text-align: left;"> </p>2.number(z)メソッドでは<p style="text-align: left;">expression<strong>のリアルタイム表示を実現するためにDOMのinnerHTMLを使用し、クリックされた数値や記号を<a href="http://www.php.cn/wiki/81.html" target="_blank">string</a>contentを使用して「=」をクリックした際にfact(content. ) を計算といいます。 <a href="http://www.php.cn/wiki/57.html" target="_blank"></a></strong> コードは次のとおりです: </p> <pre><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></pre> <p style="text-align: left;"> </p>3. この計算機の再帰アルゴリズムの考え方: <p style="text-align: left;"> では、ここでの内容は、最初に導入されたパラメーターではなく、再帰呼び出し後の符号なし文字列です。 <strong>りー</strong> 上記がすべてのコードです。設計アイデアで注意すべき点は次の 2 つです: <code>fact(content)</code>中，先用<code>content.indexOf("+")</code>判断"+"号是否存在，若存在，则分别递归调用index前后的两个字符串，并让其相加，直到所有串中都找不到"+"后，开始用<code>content.lastIndexOf("-")</code>判断"-"号，后续操作和加号一样，存在则递归index前后的两个字符串，并让其相减，直到找不到减号，就开始判断乘号和除号，直到没有符号后返回<code>parseFloat(content)</code></p> 1. <p style="text-align: left;"> はプラス記号と乗算記号に使用されます。 </p> <p style="text-align: left;"> 例: content="3-2-1"<code>indexOf()</code>，而减号和除号用的<code>lastIndexOf()</code></p> <p style="text-align: left;"> を使用する場合、最初に文字列を </p>fact("3")-fact("2-1")<p style="text-align: left;"> に分割します。fact が再帰的に呼び出されると、<code>indexOf()</code>parseFloat("3") が返されます。 ")<span style="color:#0000ff;">、そして最後を再帰的に呼び出すと</span>parseFloat("2")-parseFloat("1")=1<span style="color:#0000ff;">となります。これが</span>fact("2-1")<span style="color:#0000ff;">の戻り値になります。最終結果は 2 で、これは In: 3-(2-1) と同等です。 </span><span style="color:#0000ff;"> lastIndexOf() を使用すると、文字列が </span>fact("3-2")-fact("1")</p> に分割され、<p style="text-align: left;">fact("3-2")<span style="color:#0000ff;"> の戻り値は </span>parseFloat(" 3")- parseFloat("2")=1<span style="color:#0000ff;">となり、左から右への計算が実現します。 </span><span style="color:#0000ff;"> 除算記号にも同じことが当てはまります。content="6/3/2" がindexOf() を使用する場合、プラス記号と乗算には順序の問題がないため、6/(3/2) と同等になります。符号、indexOf() を使用できます。 </span></p> 2. 掛け算と割り算は判断の内層にあり、足し算と引き算は判断の外層にあります。 <p style="text-align: left;"></p> 乗算と除算は最初に計算する必要があるため、内部判定は最初に符号なしの文字列を取得し、それを最初に計算します。 <p style="text-align: left;"></p> この電卓について個人的に最適化できると思うこと: (あなたもそれについて考えることができます)<p style="text-align: left;"></p> 1. イベントをボタンにバインドする場合は、イベント<p style="text-align: left;">プロキシ モード</p>を使用します。 <p style="text-align: left;">2. どのプロパティまたはメソッドを使用するかについては、ブラウザーの互換性の問題を考慮する必要があります。 <a href="http://www.php.cn/design-pattern/proxy-pattern.html" target="_blank"></a>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 <br></p>推奨読書: <p></p> <p></p> <p><br></p> <p></p>
