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

本文实例讲述了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("-")

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/92.html