JS verwendet Rekursion, um einen einfachen Rechner auf der Webseite zu implementieren

Dieses Mal werde ich Ihnen die Verwendung von Rekursion in JS vorstellen, um einen einfachen Rechner auf der Webseite zu implementieren. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Rekursion in JS, um einen einfachen Rechner in der Webversion zu implementieren? . Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Die rekursive Implementierung der Webversion des Rechners kann die Designideen vereinfachen:

1. CSS+HTML implementiert das Erscheinungsbild des Rechners, bindet das Zahl(z)-Ereignis an jede Schaltfläche und übergibt die Differenz in z, um die Schaltfläche zu unterscheiden, die das Ereignis ausgelöst hat.

Setzen Sie es in den Kopf

Dieses p wird in den Textkörper eingefügt, der der HTML-Code des Rechners ist. number() unterscheidet die Auslöseschaltflächen durch die Übergabe unterschiedlicher Zahlen.

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

Nach dem Login kopieren 2. Verwenden Sie in der Methode number(z) innerHTML von DOM, um die Echtzeitanzeige des -Ausdrucks zu realisieren, und verwenden Sie den Inhalt von string , um die angeklickte Zahl oder das angeklickte Symbol zu speichern . Wenn Sie auf „=" klicken, rufen Sie fact(content) zur Berechnung auf.

Der Code lautet wie folgt:

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;//让它实时显示 } } Nach dem Login kopieren 3. Die Idee des rekursiven Algorithmus in diesem Rechner: Bestimmen Sie in fact(content) zunächst, ob das „+“-Zeichen vorhanden ist, und rufen Sie die beiden Zeichenfolgen vorher rekursiv auf und nach index. und lassen Sie sie hinzufügen, bis „+“ nicht in allen Zeichenfolgen gefunden wird, und verwenden Sie dann content.indexOf("+") , um das „-“-Zeichen zu beurteilen. Die nachfolgende Operation ist dieselbe wie das Pluszeichen. Rekursieren Sie die beiden Zeichenfolgen vor und nach dem Index und subtrahieren Sie sie, bis kein Minuszeichen mehr gefunden wird. Beginnen Sie dann mit der Beurteilung des Multiplikationszeichens und des Divisionszeichens und geben Sie content.lastIndexOf("-") zurück, bis kein Vorzeichen mehr vorhanden ist string nach dem rekursiven Aufruf, nicht der am Anfang eingeführte Parameter. parseFloat(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型的数值 } } } } } Nach dem Login kopieren Das Obige ist der gesamte Code. Zwei Punkte, auf die Sie bei der Designidee achten sollten, sind:

1. Das Pluszeichen und das Multiplikationszeichen verwenden , während das Minuszeichen und das Divisionszeichen indexOf() verwenden. lastIndexOf()

Zum Beispiel: content="3-2-1"

Wenn verwendet wird, wird die Zeichenfolge zunächst in indexOf() fact("3")-fact("2-1") unterteilt, wobei die vordere „3“ ohne Vorzeichen ist und bei rekursivem Aufruf von fact("3")-fact("2-1") gibt parseFloat( "3") zurück, und wenn der nachfolgende rekursive Aufruf erfolgt, wird es zu parseFloat("2")-parseFloat("1")＝1 , das ist fact("2- Der Rückgabewert von 1") , das Endergebnis ist 2, was äquivalent ist zu: 3-(2-1).

Wenn lastIndexOf() verwendet wird, wird die Zeichenfolge in fact("3-2")-fact("1") und den Rückgabewert von fact("3-2") unterteilt. ist parseFloat("3")-parseFloat("2")＝1 und realisiert somit die Berechnung von links nach rechts.

Das Gleiche gilt für das Divisionszeichen: Wenn content="6/3/2" indexOf() verwendet, ist es äquivalent zu: 6/(3/2), da es kein Ordnungsproblem mit dem Pluszeichen und der Multiplikation gibt sign, indexOf() kann verwendet werden.

2. Multiplikation und Division befinden sich in der inneren Beurteilungsebene, und Addition und Subtraktion befinden sich in der äußeren Beurteilungsebene.

Da Multiplikation und Division zuerst berechnet werden müssen, erhält das innere Urteil zuerst die vorzeichenlose Zeichenfolge und berechnet sie zuerst.

Was meiner Meinung nach an diesem Rechner optimiert werden kann: (Sie können auch darüber nachdenken)

1. Wenn Sie Ereignisse an Schaltflächen binden, verwenden Sie den Ereignis- -Proxy-Modus . 2. Welche verwendeten Attribute oder Methoden müssen Browserkompatibilitätsprobleme berücksichtigen?

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

JS verwendet Rekursion, um einen einfachen Rechner auf der Webseite zu implementieren