JS使用遞歸實現網頁版簡潔計算器

這次帶給大家JS使用遞歸實現網頁版簡潔計算器，JS使用遞歸實現網頁版簡潔計算器的 注意事項 有哪些，下面就是實戰案例，一起來看一下。

遞歸實作網頁版計算器可以簡化程式碼，設計想法：

1、css＋html實作計算器的外觀，給每個button綁定number(z)事件，傳入z的不同來區分觸發事件的按鈕。

# 放入head

# 這個p放在body中，是計算器的html，number()透過傳入不同的數字，區分觸發按鈕。

+ - * / = 1 2 3 4 5 6 7 8 9

登入後複製 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、用到的哪些屬性或方法需要考慮瀏覽器相容問題。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

JS使用遞歸實現網頁版簡潔計算器