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 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
JqGrid web打印实现代码
May 31 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JavaScript函数柯里化
Nov 07 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 默默经典版本
2009/08/04 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python实现单词拼写检查
2015/04/25 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python Celery定时任务的示例
2018/03/13 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python解析微信dat文件的方法
2020/11/30 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
新春联欢会主持词
2014/03/24 职场文书
活动总结格式
2014/08/30 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
2019学校运动会开幕词
2019/05/13 职场文书