本文實例講述了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前后的兩個字符串，并讓其相減，直到找不到減號，就開始判斷乘號和除號，直到沒有符號后返回