本文實例講述了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)); //當找得到“＋”號時，分成兩部分相加遞歸 }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型的數值 } } } }}以上是全部代碼，設計思路中要注意的兩點是：
1、加號和乘號用的indexOf()，而減號和除號用的lastIndexOf()。
舉個例子：content="3－2－1"
它如果用indexOf()，先把串分成fact("3")-fact("2-1"),前面"3"無符號，遞歸調用fact時返回parseFloat("3"),而后面的遞歸調用時，會變成parseFloat("2")－parseFloat("1")＝1，這個是fact("2-1")的返回值，最終結果是2，這就相當于：3-(2-1)。
如果用lastIndexOf()，它把串分成fact("3－2")-fact("1")，fact("3－2")的返回值是parseFloat("3")－parseFloat("2")＝1，這樣就實現了從左到右的計算。
除號也是同理：若content＝"6/3/2"用indexOf()，相當于：6/(3/2)，因為加號和乘號不存在順序問題，因此可以用indexOf()。
2、乘除在判斷的內層，加減在判斷的外層。
由于乘除要先計算，內層的判斷會先獲得沒有符號的串，他們就會先計算。
這個計算器個人覺得可以優化的地方：(大家也可以思考下)
1、給button綁定事件的時候，采用事件代理模式。
2、用到的哪些屬性或方法需要考慮瀏覽器兼容問題。
本人最開始做的是非遞歸的兩個數加減乘除的計算器，后面改進的時候，想做多個數的計算，思考起來就更復雜了。當采用遞歸來寫，代碼量比之前小，易閱讀，并且思考起來不復雜。感興趣的可以試一試。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
