在JS中如何实现网页版计算器

这篇文章主要介绍了js基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器的步骤与相关操作技巧,需要的朋友可以参考下

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

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

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

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

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

<p> </p><p></p> <button>+</button> <button>-</button> <button>*</button> <br><button>/</button> <button>=</button> <br><button>1</button> <button>2</button> <button>3</button> <br><button>4</button> <button>5</button> <button>6</button> <br><button>7</button> <button>8</button> <button>9</button> 

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型的数值    }   }  } }}