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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
DWR Ext 加载数据
Mar 22 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 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
调频问题解答
2021/03/01 无线电
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python tkinter label 更新方法
2018/10/11 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python Cookie 读取和保存方法
2018/12/28 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
《大江保卫战》教学反思
2014/04/11 职场文书
拉歌口号大全
2014/06/13 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
优质护理服务心得体会
2016/01/22 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书