在JS中如何實現網頁版計算器

這篇文章主要介紹了JS基於遞歸實現網頁版計算器的方法,結合實例形式分析了javascript採用遞歸演算法實現網頁版計算器的步驟與相關操作技巧,需要的朋友可以參考下

本文實例講述了JS基於遞歸實作網頁版計算器的方法。分享給大家供大家參考，具體如下：

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

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

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

如何使用vuex實作選單管理

使用Vue如何開發樹狀元件

詳細解讀Angular5.1新功能

使用nodejs如何實作gulp打包

#

以上是在JS中如何實現網頁版計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！