JS uses recursion to implement a simple calculator on the web page

This time I will bring you JS using recursion to implement the web version of the simple calculator. What are the precautions for using JS to use recursion to implement the web version of the simple calculator. The following is a practical case, let's take a look.

Recursively implementing the web version of the calculator can simplify the code. Design ideas:

1. CSS+html implements the appearance of the calculator, binds the number(z) event to each button, and passes in the difference in z to distinguish the button that triggered the event.

Put it into the head

This p is placed in the body, which is the HTML of the calculator. number() distinguishes the trigger buttons by passing in different numbers.

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

Copy after login 2. In the number(z) method, use innerHTML of DOM to realize the real-time display of expression , and use string content to store the clicked number or symbol. When clicked "=", call fact(content) for calculation.

The code is as follows:

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;//让它实时显示 } } Copy after login 3. The idea of the recursive algorithm in this calculator: In fact(content) , first use content.indexOf(" ") to determine whether the " " number exists. If it exists, recursively call the two strings before and after index and add them together until " " is not found in all strings. Then start using content.lastIndexOf("-") Determine the "-" sign. The subsequent operation is the same as the plus sign. If it exists, recurse the two strings before and after the index and subtract them until the minus sign cannot be found. Then start to judge the multiplication sign and division sign until there is no sign. After returning parseFloat(content) , the content here is the unsigned string after the recursive call, not the parameter introduced at the beginning.

//实现递归计算 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型的数值 } } } } } Copy after login The above is all the code. Two points to pay attention to in the design idea are:

1. The plus sign and multiplication sign use indexOf() , while the minus sign and division sign use lastIndexOf() .

For example: content="3-2-1"

If it uses indexOf() , first divide the string into fact("3")-fact("2-1") , the first "3" is unsigned, and when calling fact recursively Returns parseFloat("3") , and when subsequent recursive calls are made, it will become parseFloat("2")-parseFloat("1")＝1 , this is ## The return value of #fact("2-1") , the final result is 2, which is equivalent to: 3-(2-1).

If lastIndexOf() is used, it divides the string into fact("3-2")-fact("1") , and the return value of fact("3-2") is parseFloat("3")-parseFloat("2")＝1 , thus realizing calculation from left to right.

The same goes for the division sign: if content="6/3/2" uses indexOf(), it is equivalent to: 6/(3/2). Because there is no order problem with the plus sign and the multiplication sign, indexOf() can be used.

2. Multiplication and division are in the inner layer of judgment, and addition and subtraction are in the outer layer of judgment.

Since multiplication and division must be calculated first, the inner judgment will first obtain the unsigned string, and they will calculate it first.

What I personally think can be optimized about this calculator: (You can also think about it)

1. When binding events to buttons, use event proxy mode . 2. Which properties or methods are used need to consider browser compatibility issues.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

JS uses recursion to implement a simple calculator on the web page