집 >웹 프론트엔드 >JS 튜토리얼 >재귀 알고리즘 기반 웹 계산기의 JS 구현에 대한 자세한 설명

재귀 알고리즘 기반 웹 계산기의 JS 구현에 대한 자세한 설명

小云云원래의: 2017-12-21 14:29:461702검색

이 글에서는 재귀 기반의 웹 버전 계산기를 구현하기 위한 JS의 방법을 주로 소개하며, 웹 버전 계산기를 구현하기 위해 JavaScript에서 재귀 알고리즘을 사용하는 단계와 관련 작동 기술을 예제 형식으로 분석합니다. 필요한 친구들은 참고해서 모두에게 도움이 되었으면 좋겠습니다.

웹 버전의 계산기를 재귀적으로 구현하면 코드가 단순화됩니다. 디자인 아이디어:

1. CSS+html은 계산기의 모양을 구현하고 숫자(z) 이벤트를 각 버튼에 바인딩하고 차이를 전달합니다. z 이벤트를 트리거하는 버튼을 구별합니다.

c9ccee2e6ea535a969eb3f532ad9fe89머리에 넣으세요

이 p는 계산기의 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을 사용하여 표현식의 실시간 표시를 구현하고, 문자열 내용을 사용하여 클릭한 숫자나 기호를 저장합니다. "="를 클릭하면 사실(내용)이 계산됩니다.

코드는 다음과 같습니다.

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 = &#39;+&#39;; break;
    case 11: z = &#39;-&#39;; break;
    case 12: z = &#39;*&#39;; break;
    case 13: z = &#39;/&#39;; break;
   }
   //把此时输入的字符存入content
   if(content){
    content+=z.toString();
   }else{
    content=z.toString();
   }
   k.innerHTML = content;//让它实时显示
  }
}

3. 이 계산기의 재귀 알고리즘 아이디어: fact(content)에서 먼저 content를 사용합니다. .indexOf("+ ") "+" 기호가 있는지 확인합니다. 존재하는 경우 인덱스 앞과 뒤의 두 문자열을 재귀적으로 호출하고 모든 문자열에서 "+"가 발견되지 않을 때까지 함께 추가합니다. content.lastIndexOf("-")를 사용하여 "-" 기호를 결정합니다. 후속 작업은 더하기 기호와 동일합니다. 인덱스 앞과 뒤의 두 문자열을 반복하여 뺍니다. 뺄셈이 발견되지 않을 때까지 부호가 없을 때까지 곱셈 기호와 나눗셈 기호를 판단하기 시작하고 parseFloat(content)를 반환합니다. 여기에 있는 내용은 재귀 호출 이후의 부호 없는 문자열입니다. 처음에 소개된 매개변수입니다. 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()rrreee위는 전체 코드입니다. 디자인 아이디어에서 주목해야 할 두 가지 사항은 다음과 같습니다. 1 더하기 기호와 곱셈 기호는 indexOf()를 사용하고, 빼기 기호는 indexOf()를 사용합니다. lastIndexOf()의 부호 및 나누기 부호 사용. 예: content="3-2-1"

indexOf()를 사용하는 경우 먼저 문자열을 fact("3")-fact("2-1")으로 나눕니다. ), 첫 번째 "3"은 부호가 없으며, 팩트가 재귀적으로 호출되면 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. 이벤트를 버튼에 바인딩할 때 이벤트 프록시 모드를 사용하세요.

2. 브라우저 호환성 문제를 고려하려면 어떤 속성이나 메서드를 사용해야 합니까?

처음에는 두 숫자의 덧셈, 뺄셈, 곱셈, 나눗셈을 위한 비재귀 계산기를 만들었습니다. 나중에 개선하면서 여러 숫자를 계산하고 싶었는데 생각하기가 더 복잡해졌습니다. 재귀적으로 작성하면 코드 크기가 이전보다 작아지고 읽기 쉽고 생각하기 복잡하지 않습니다. 관심 있는 분들은 한번 시도해 보시기 바랍니다.

재귀 알고리즘 기반 웹 계산기의 JS 구현에 대한 자세한 설명

관련 기사