JS는 재귀를 사용하여 웹 페이지에 간단한 계산기를 구현합니다.

이번에는 JS에서 재귀를 사용하여 웹 페이지에서 간단한 계산기를 구현하는 방법을 소개하겠습니다. JS에서 재귀를 사용하여 웹 페이지에서 간단한 계산기를 구현할 때 주의해야 할 주의사항 은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

웹 버전의 계산기를 재귀적으로 구현하면 코드를 단순화할 수 있습니다.

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

머리에 담아보세요

이 p는 계산기의 HTML인 본문에 배치됩니다. number()는 다른 숫자를 전달하여 트리거 버튼을 구별합니다.

rreee 2. number(z) 메소드에서는 DOM의 innerHTML을 사용하여 expression 의 실시간 표시를 구현하고, string content를 사용하여 클릭한 숫자나 기호를 저장합니다. )를 계산이라고 합니다.

코드는 다음과 같습니다:

+ - * / = 1 2 3 4 5 6 7 8 9

3. 이 계산기의 재귀 알고리즘 아이디어: fact(content) 에서 먼저 content.indexOf("+") 를 사용하여 "+" 기호가 존재하는 경우 인덱스 앞뒤의 두 문자열을 재귀적으로 호출하여 모든 문자열에서 "+"가 발견되지 않을 때까지 추가합니다. 그런 다음 content.lastIndexOf("-") "-" 기호를 결정합니다. 후속 연산은 더하기 기호와 동일합니다. 존재하는 경우 인덱스 앞과 뒤의 두 문자열을 반복하여 빼기 기호를 찾을 수 없을 때까지 뺍니다. 그런 다음 곱셈을 시작합니다. 부호 및 나눗셈 기호가 없으면 parseFloat(content) 가 반환됩니다. 여기의 내용은 재귀 호출 후 부호 없는 문자열이며 처음에 도입된 매개 변수가 아닙니다. fact(content) 中，先用 content.indexOf("+") 判断"+"号是否存在，若存在，则分别递归调用index前后的两个字符串，并让其相加，直到所有串中都找不到"+"后，开始用 content.lastIndexOf("-") 判断"-"号，后续操作和加号一样，存在则递归index前后的两个字符串，并让其相减，直到找不到减号，就开始判断乘号和除号，直到没有符号后返回 parseFloat(content) ，这里的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;//让它实时显示 } } 以上是全部代码，设计思路中要注意的两点是：

1、加号和乘号用的 indexOf() ，而减号和除号用的 lastIndexOf() 。

举个例子：content="3－2－1"

它如果用 indexOf() rreee 위 코드가 전부입니다. 디자인 아이디어에서 주목해야 할 두 가지 사항은 다음과 같습니다. 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)와 같습니다. sign, indexOf()를 사용할 수 있습니다. 2. 곱셈과 나눗셈은 내부 판단층에 있고, 덧셈과 뺄셈은 외부 판단층에 있습니다. 곱셈과 나눗셈을 먼저 계산해야 하므로 내부 판단에서는 부호 없는 문자열을 먼저 얻고 이를 먼저 계산합니다.

개인적으로 이 계산기에 대해 최적화할 수 있다고 생각하는 것은 다음과 같습니다. (당신도 생각해 볼 수 있습니다)

1. 이벤트를 버튼에 바인딩할 때 이벤트

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서: 🎜🎜🎜🎜🎜🎜🎜