집 >웹 프론트엔드 >JS 튜토리얼 >JS에서 웹 버전의 계산기를 구현하는 방법

JS에서 웹 버전의 계산기를 구현하는 방법

亚连원래의: 2018-06-19 15:55:563458검색

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

본 글의 예시를 설명합니다. 재귀 기반 계산기의 웹 버전을 구현하기 위한 JS 방식을 개발했습니다. 참고용으로 모든 사람과 공유하세요.

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

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을 사용하여 표현식의 실시간 표시를 구현하고, "="일 때 문자열 내용을 저장합니다. 클릭하면 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 = &#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( "+") "+" 기호가 존재하는지 확인합니다. 인덱스 앞과 뒤의 두 문자열을 재귀적으로 호출하여 모든 문자열에서 "+"가 발견되지 않을 때까지 함께 추가한 다음 <code> 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()를 사용하고 빼기 기호와 나누기는 다음과 같습니다. 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에서 웹 버전의 계산기를 구현하는 방법

관련 기사