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

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.

c9ccee2e6ea535a969eb3f532ad9fe89In 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.

<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. 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;//让它实时显示
  }
}

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型的数值
    }
   }
  }
 }
}

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JS-Implementierung des Webrechners basierend auf einem rekursiven Algorithmus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!