详解JS基于递归算法实现网页版计算器

递归实现网页版计算器可以简化代码，设计思路：

1、css＋html实现计算器的外观，给每个button绑定number(z)事件，传入z的不同来区分触发事件的按钮。

<style>放入head中

这个p放在body中，是计算器的html，number()通过传入不同的数字，区分触发按钮。

<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实现表达式的实时显示，并用字符串content存储已点击的数字或符号，当点击"="时，调用fact(content)进行计算。

代码如下：

3、本计算器中递归算法的思路：在fact(content)中，先用content.indexOf("+")判断"+"号是否存在，若存在，则分别递归调用index前后的两个字符串，并让其相加，直到所有串中都找不到"+"后，开始用content.lastIndexOf("-")判断"-"号，后续操作和加号一样，存在则递归index前后的两个字符串，并让其相减，直到找不到减号，就开始判断乘号和除号，直到没有符号后返回parseFloat(content)，这里的content是递归调用后的无符号字符串，并不是最开始引入的参数了。

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

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

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

它如果用indexOf()，先把串分成fact("3")-fact("2-1"),前面"3"无符号，递归调用fact时返回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、给button绑定事件的时候，采用事件代理模式。
2、用到的哪些属性或方法需要考虑浏览器兼容问题。

本人最开始做的是非递归的两个数加减乘除的计算器，后面改进的时候，想做多个数的计算，思考起来就更复杂了。当采用递归来写，代码量比之前小，易阅读，并且思考起来不复杂。感兴趣的可以试一试。

相关推荐：

PHP简单四则运算计算器功能的实现

php实现高级计算器的功能示例（基于堆栈）

利用jQuery实现一个简单的计算器

以上就是详解JS基于递归算法实现网页版计算器的详细内容，更多请关注Gxl网其它相关文章！