So implementieren Sie eine Webversion des Taschenrechners in JS

In diesem Artikel wird hauptsächlich die auf Rekursion basierende JS-Methode zur Implementierung der Webversion des Rechners vorgestellt. Er analysiert die Schritte und zugehörigen Betriebstechniken zur Verwendung des rekursiven Algorithmus in JavaScript zur Implementierung der Webversion des Rechners Beispiele. Freunde in Not können sich darauf beziehen

Das Beispiel in diesem Artikel beschreibt die Methode zur Implementierung der Webversion des Rechners basierend auf JS-Rekursion. Teilen Sie es als Referenz mit allen:

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

1 implementiert das Erscheinungsbild des Taschenrechners und gibt jedem die Schaltfläche, die an das Ereignis Zahl (z) gebunden ist, und die Differenz in z wird übergeben, um die Schaltfläche zu unterscheiden, die das Ereignis ausgelöst hat.

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. In der Methode number(z) wird das innerHTML des DOM verwendet, um die Echtzeitanzeige des Ausdrucks zu realisieren, und der String-Inhalt wird zum Speichern der angeklickten Zahl oder verwendet Wenn auf „=" geklickt wird, wird der zu berechnende Fakt (Inhalt) 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 zuerst content.indexOf("+"), um zu beurteilen, ob das Zeichen „+“ vorhanden ist. Wenn es existiert, rufen Sie rekursiv die beiden Zeichenfolgen vor und nach dem Index auf und addieren Sie sie, bis „+“ nicht mehr in allen Zeichenfolgen gefunden wird. Verwenden Sie dann content.lastIndexOf("-"), um das „-“ zu beurteilen. Die nachfolgende Operation ist die gleiche wie beim Pluszeichen. Rekursieren Sie die beiden Zeichenfolgen vor und nach dem Index und subtrahieren Sie sie, bis das Minuszeichen nicht mehr gefunden werden kann Hier gibt es kein Vorzeichen und keine Rückgabe parseFloat(content) Der Inhalt ist die vorzeichenlose Zeichenfolge nach dem rekursiven Aufruf, 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. Das Pluszeichen und das Multiplikationszeichen verwenden indexOf(), während das Minuszeichen und Divisionszeichen verwenden lastIndexOf().

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 das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Vuex zur Implementierung der Menüverwaltung

So verwenden Sie Vue zur Entwicklung von Baumkomponenten

Detaillierte Interpretation der neuen Funktionen von Angular5.1

So implementieren Sie die Gulp-Verpackung mit NodeJS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Webversion des Taschenrechners in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!