溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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、用到的哪些屬性或方法需要考慮瀏覽器兼容問題。
本人最開始做的是非遞歸的兩個數加減乘除的計算器，后面改進的時候，想做多個數的計算，思考起來就更復雜了。當采用遞歸來寫，代碼量比之前小，易閱讀，并且思考起來不復雜。感興趣的可以試一試。
PS：這里再為大家推薦幾款計算工具供大家進一步參考借鑒：
在線一元函數（方程）求解計算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科學計算器在線使用_高級計算器在線計算：
http://tools.jb51.net/jisuanqi/jsqkexue
在線計算器_標準計算器：
http://tools.jb51.net/jisuanqi/jsq
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》及《JavaScript字符與字符串操作技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
