在JS中如何实现网页版计算器

这篇文章主要介绍了JS基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器的步骤与相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS基于递归实现网页版计算器的方法。分享给大家供大家参考，具体如下：

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

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

放入head中

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

+ - * / = 1 2 3 4 5 6 7 8 9

登录后复制 2、在number(z)方法中，利用DOM的innerHTML实现表达式的实时显示，并用字符串content存储已点击的数字或符号，当点击"="时，调用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 = '+'; break; case 11: z = '-'; break; case 12: z = '*'; break; case 13: z = '/'; break; } //把此时输入的字符存入content if(content){ content+=z.toString(); }else{ content=z.toString(); } k.innerHTML = content;//让它实时显示 } } 登录后复制 3、本计算器中递归算法的思路： 在 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() ，先把串分成 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、用到的哪些属性或方法需要考虑浏览器兼容问题。

上面是我整理给大家的，希望今后会对大家有帮助。

使用Vue如何开发树形组件

详细解读Angular5.1新功能

使用nodejs如何实现gulp打包

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

在JS中如何实现网页版计算器