JS基于递归实现网页版计算器的方法分析基于递归实现网页版计算器的方法分析
主要介绍了JS基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器
的步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了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));
//当找得到“＋”号时，分成两部分相加递归
资源评论
