本文主要介紹了JS基於遞歸實現網頁版計算器的方法,結合實例形式分析了javascript採用遞歸演算法實現網頁版計算器的步驟與相關操作技巧,需要的朋友可以參考下,希望能幫助到大家。
遞歸實作網頁版計算器可以簡化程式碼,設計想法:
1、css+html實作計算器的外觀,給每個button綁定number(z)事件,傳入z的不同來區分觸發事件的按鈕。
c9ccee2e6ea535a969eb3f532ad9fe89放入head中
這個p放在body中,是計算器的html,number()透過傳入不同的數字,區分觸發按鈕。
<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>
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、用到的哪些屬性或方法需要考慮瀏覽器相容問題。
本人最開始做的是非遞歸的兩個數加減乘除的計算器,後面改進的時候,想做多個數的計算,思考起來就更複雜了。當採用遞歸來寫,程式碼量比之前小,易閱讀,思考起來不複雜。有興趣的可以試試。
相關推薦:
以上是詳解JS基於遞歸演算法實現網頁版計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章!