Detaillierte Erläuterung der JS-Implementierung des Webrechners basierend auf einem rekursiven Algorithmus-js-Tutorial-php.cn

In diesem Artikel wird hauptsächlich die Methode von JS zum Implementieren der Webversion des Rechners basierend auf Rekursion vorgestellt. Er analysiert die Schritte und zugehörigen Betriebstechniken der Verwendung des rekursiven Algorithmus in JavaScript zum Implementieren der Webversion des Rechners in Form von Beispiele. Freunde, die es brauchen, können sich darauf beziehen.

Die rekursive Implementierung der Webversion des Rechners kann den Code vereinfachen:

1. CSS+HTML implementiert das Erscheinungsbild des Rechners und bindet das Zahl(z)-Ereignis zu jeder Schaltfläche und übergibt den Unterschied in der Eingabe z, um die Schaltfläche zu unterscheiden, die das Ereignis auslöst.

In den Kopf einfügen

Dieses p wird in den Textkörper eingefügt, der den HTML-Code des Rechners darstellt. Number() unterscheidet die Auslöseschaltflächen durch die Übergabe verschiedene 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 von Ausdrücken zu realisieren, und verwenden Sie dazu den String-Inhalt Speichern Sie die angeklickten Zahlen oder Symbole. Wenn auf „=" geklickt wird, wird fact(content) zur Berechnung aufgerufen.

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: in fact(content) verwenden Sie zunächst content.indexOf("+") , um festzustellen, ob das „+“-Zeichen vorhanden ist. Rufen Sie die beiden Zeichenfolgen vor und nach dem Index rekursiv auf und addieren Sie sie, bis „+“ nicht in allen Zeichenfolgen gefunden wird . Beginnen Sie mit content.lastIndexOf("-") , um das „-“-Zeichen zu beurteilen. Wenn sie vorhanden sind, rekursieren Sie die beiden Zeichenfolgen vor und nach dem Index und subtrahieren Sie sie, bis das Minuszeichen nicht mehr gefunden wird Beginnen Sie mit der Beurteilung des Multiplikationszeichens und des Divisionszeichens und geben Sie parseFloat(content) zurück, bis kein Symbol mehr vorhanden ist. Der Inhalt hier ist die vorzeichenlose Zeichenfolge nach dem rekursiven Aufruf und nicht der am Anfang eingeführte Parameter.

//实现递归计算 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, auf den Sie bei der Designidee achten sollten:

1 werden indexOf() verwendet, während die Minus- und Divisionszeichen lastIndexOf() verwenden.

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

Wenn Sie indexOf() verwenden, teilen Sie die Zeichenfolge zunächst in fact("3")-fact("2 -1") , die erste „3" ist ohne Vorzeichen. Beim rekursiven Aufruf von fact wird parseFloat("3") zurückgegeben, und wenn der nachfolgende rekursive Aufruf erfolgt, wird daraus parseFloat("2 ")-parseFloat("1")＝1 , dies ist der Rückgabewert von fact("2-1") , das Endergebnis ist 2, was äquivalent ist zu: 3-(2- 1).

Wenn lastIndexOf() verwendet wird, unterteilt es die Zeichenfolge in fact("3-2")-fact("1") , fact("3-2" ) ist parseFloat("3")-parseFloat("2")=1 , wodurch die Berechnung von links nach rechts realisiert wird.

Das Gleiche gilt für das Divisionszeichen: Wenn content="6/3/2" indexOf() verwendet, entspricht es: 6/(3/2), da es kein Ordnungsproblem gibt das Pluszeichen und das Multiplikationszeichen, sodass Sie indexOf() verwenden können.

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 habe zunächst einen nicht rekursiven Rechner für die Addition, Subtraktion, Multiplikation und Division zweier Zahlen erstellt. Als ich ihn später verbesserte, wollte ich mehrere Zahlen berechnen, was komplizierter wurde. Beim rekursiven Schreiben ist die Codegröße kleiner als zuvor, leicht zu lesen und nicht kompliziert im Nachdenken. Wer Interesse hat, kann es einfach mal ausprobieren.

Verwandte Empfehlungen:

Implementierung der einfachen Rechnerfunktion mit vier arithmetischen Operationen in PHP

Beispiel für die PHP-Implementierung eines erweiterten Rechners Funktion (Basierend auf dem Stapel)

Verwenden Sie jQuery, um einen einfachen Rechner zu implementieren

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

Detaillierte Erläuterung der JS-Implementierung des Webrechners basierend auf einem rekursiven Algorithmus