JS基于递归实现网页版计算器的方法分析


Posted in Javascript onDecember 20, 2017

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

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

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

<style>放入head中

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

<div class="bg">
 <div id="txt"></div>
 <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> 
</div>

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、用到的哪些属性或方法需要考虑浏览器兼容问题。

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

PS:这里再为大家推荐几款计算工具供大家进一步参考借鉴:

在线一元函数(方程)求解计算工具:
http://tools.3water.com/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算:
http://tools.3water.com/jisuanqi/jsqkexue

在线计算器_标准计算器:
http://tools.3water.com/jisuanqi/jsq

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JavaScript 创建对象
Jul 17 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
详解javascript事件冒泡
Jan 09 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 #Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 #Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 #Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 #Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 #Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 #Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
You might like
PHP通用检测函数集合
2006/11/25 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python实现网页录音效果
2020/10/26 Python
Python实现简单猜数字游戏
2021/02/03 Python
水务局局长岗位职责
2013/11/28 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
奶茶店创业计划书
2014/08/14 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
教师师德师风整改措施
2014/10/24 职场文书
2014年班干部工作总结
2014/11/25 职场文书
恰同学少年观后感
2015/06/08 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js