这篇文章主要介绍了JS基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器的步骤与相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS基于递归实现网页版计算器的方法。分享给大家供大家参考,具体如下: 递归实现网页版计算器可以简化代码,设计思路: 1、css+html实现计算器的外观,给每个button绑定number(z)事件,传入z的不同来区分触发事件的按钮。 放入head中</p> <p>这个p放在body中,是计算器的html,number()通过传入不同的数字,区分触发按钮。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><p class="bg"> <p id="txt"></p> <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> </p></pre><div class="contentsignin">Salin selepas log masuk</div></div><p><strong>2、在number(z)方法中,利用DOM的innerHTML实现表达式的实时显示,并用字符串content存储已点击的数字或符号,当点击"="时,调用fact(content)进行计算。</strong></p><p>代码如下:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">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;//让它实时显示 } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><strong>3、本计算器中递归算法的思路:</strong>在<code>fact(content)</code>中,先用<code>content.indexOf("+")</code>判断"+"号是否存在,若存在,则分别递归调用index前后的两个字符串,并让其相加,直到所有串中都找不到"+"后,开始用<code>content.lastIndexOf("-")</code>判断"-"号,后续操作和加号一样,存在则递归index前后的两个字符串,并让其相减,直到找不到减号,就开始判断乘号和除号,直到没有符号后返回<code>parseFloat(content)</code>,这里的content是递归调用后的无符号字符串,并不是最开始引入的参数了。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">//实现递归计算 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型的数值 } } } } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>以上是全部代码,设计思路中要注意的两点是:</p> <p>1、加号和乘号用的<code>indexOf()</code>,而减号和除号用的<code>lastIndexOf()</code>。</p> <p>举个例子:content="3-2-1"</p> <p>它如果用<code>indexOf()</code>,先把串分成<span style="color: #0000ff">fact("3")-fact("2-1")</span>,前面"3"无符号,递归调用fact时返回<span style="color: #0000ff">parseFloat("3")</span>,而后面的递归调用时,会变成<span style="color: #0000ff">parseFloat("2")-parseFloat("1")=1</span>,这个是<span style="color: #0000ff">fact("2-1")</span>的返回值,最终结果是2,这就相当于:3-(2-1)。</p> <p>如果用lastIndexOf(),它把串分成<span style="color: #0000ff">fact("3-2")-fact("1")</span>,<span style="color: #0000ff">fact("3-2")</span>的返回值是<span style="color: #0000ff">parseFloat("3")-parseFloat("2")=1</span>,这样就实现了从左到右的计算。</p> <p>除号也是同理:若content="6/3/2"用indexOf(),相当于:6/(3/2),因为加号和乘号不存在顺序问题,因此可以用indexOf()。</p> <p>2、乘除在判断的内层,加减在判断的外层。</p> <p>由于乘除要先计算,内层的判断会先获得没有符号的串,他们就会先计算。</p> <p>这个计算器个人觉得可以优化的地方:(大家也可以思考下)</p> <p>1、给button绑定事件的时候,采用事件代理模式。<br>2、用到的哪些属性或方法需要考虑浏览器兼容问题。</p> <p>上面是我整理给大家的,希望今后会对大家有帮助。</p> <p>相关文章:</p> <p><a href="http://www.php.cn/js-tutorial-404078.html" target="_blank">如何使用vuex实现菜单管理</a></p> <p><a href="http://www.php.cn/js-tutorial-404077.html" target="_blank">使用Vue如何开发树形组件</a></p> <p><a href="http://www.php.cn/js-tutorial-404080.html" target="_blank">详细解读Angular5.1新功能</a></p> <p><a href="http://www.php.cn/js-tutorial-404081.html" target="_blank">使用nodejs如何实现gulp打包</a></p>