91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS基于遞歸實現網頁版計算器的方法分析

發布時間:2020-10-13 13:21:54 來源:腳本之家 閱讀:166 作者:遠方1234567 欄目:web開發

本文實例講述了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程序設計有所幫助。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

鲁甸县| 中超| 洪泽县| 崇州市| 易门县| 镇原县| 夏津县| 屯门区| 泸水县| 福鼎市| 高阳县| 洞口县| 灵石县| 文登市| 丰台区| 尤溪县| 新竹市| 灌云县| 安塞县| 页游| 全南县| 临汾市| 万山特区| 南靖县| 高邮市| 黄冈市| 石城县| 额济纳旗| 黄浦区| 凤台县| 苏尼特右旗| 三都| 平昌县| 平顶山市| 二手房| 通化县| 布尔津县| 邻水| 肇东市| 本溪| 泸水县|