Explication détaillée de l'implémentation JS d'un calculateur Web basé sur un algorithme récursif

Cet article présente principalement la méthode JS pour implémenter la version web de la calculatrice basée sur la récursivité. Il analyse les étapes et les techniques de fonctionnement associées à l'utilisation de l'algorithme récursif en JavaScript pour implémenter la version web de la calculatrice sous la forme de. des exemples. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'implémentation récursive de la version Web de la calculatrice peut simplifier le code. Idées de conception :

1 CSS+html implémente l'apparence de la calculatrice, lie l'événement number(z). à chaque bouton, et passe La différence d'entrée z distingue le bouton qui déclenche l'événement.

c9ccee2e6ea535a969eb3f532ad9fe89Mettez-le dans la tête

Ce p est placé dans le corps, qui est le HTML de la calculatrice. Number() distingue les boutons de déclenchement en passant. numéros différents.

<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. Dans la méthode number(z), utilisez innerHTML du DOM pour réaliser l'affichage en temps réel des expressions et utilisez le contenu de la chaîne pour stockez les nombres ou les symboles cliqués, lorsque "=" est cliqué, le fait (contenu) est appelé pour le calcul.

Le code est le suivant :

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. L'idée de l'algorithme récursif dans cette calculatrice : dans fact(content), utilisez d'abord content.indexOf("+") pour déterminer si le signe "+" existe. S'il existe, appelez récursivement les deux chaînes avant et après index et additionnez-les jusqu'à ce que "+" ne soit pas trouvé dans toutes les chaînes. . Commencez à utiliser content.lastIndexOf("-") pour juger le signe "-". L'opération suivante est la même que le signe plus, s'il existe, récurez les deux chaînes avant et après l'index et soustrayez-les jusqu'à ce que le signe moins ne soit pas trouvé. commence à juger le signe de multiplication et le signe de division. , renvoie parseFloat(content) jusqu'à ce qu'il n'y ait plus de symbole. Le contenu ici est la chaîne non signée après l'appel récursif, et n'est pas le paramètre introduit au début.

//实现递归计算
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型的数值
    }
   }
  }
 }
}

Ce qui précède est tout le code. Deux points à prendre en compte dans l'idée de conception sont :

1. sont utilisés indexOf(), tandis que les signes moins et division utilisent lastIndexOf().

Par exemple : content="3-2-1"

Si vous utilisez indexOf(), divisez d'abord la chaîne en fact("3")-fact("2 -1"), le premier "3" n'est pas signé. Lors de l'appel récursif de fact, il renvoie parseFloat("3"), et lorsque l'appel récursif suivant est effectué, il deviendra parseFloat("2 ")-parseFloat("1")＝1, c'est la valeur de retour de fact("2-1"), le résultat final est 2, ce qui est équivalent à : 3-(2-1).

Si lastIndexOf() est utilisé, il divise la chaîne en fact("3-2")-fact("1"), fact("3-2" ) est parseFloat("3")-parseFloat("2")=1, réalisant ainsi le calcul de gauche à droite.

Il en est de même pour le signe de division : si content="6/3/2" utilise indexOf(), cela équivaut à : 6/(3/2), car il n'y a pas de problème d'ordre avec le signe plus et le signe de multiplication, vous pouvez donc utiliser indexOf().

2. La multiplication et la division sont dans la couche interne du jugement, et l'addition et la soustraction sont dans la couche externe du jugement.

Puisque la multiplication et la division doivent être calculées en premier, le jugement intérieur obtiendra d'abord la chaîne non signée, et il la calculera en premier.

Ce que je pense personnellement peut être optimisé dans cette calculatrice : (Vous pouvez également y penser)

1 Lorsque vous associez des événements à des boutons, utilisez le mode proxy d'événement.

2. Quels attributs ou méthodes utilisés doivent prendre en compte les problèmes de compatibilité du navigateur.

J'ai d'abord créé une calculatrice non récursive pour l'addition, la soustraction, la multiplication et la division de deux nombres. Lorsque je l'ai amélioré plus tard, j'ai voulu calculer plusieurs nombres, ce qui est devenu plus compliqué à imaginer. Lorsqu'elle est écrite de manière récursive, la taille du code est plus petite qu'auparavant, facile à lire et pas compliquée à réfléchir. Ceux qui sont intéressés peuvent essayer.

Recommandations associées :

implémentation de la fonction de calcul de quatre opérations arithmétiques simples en PHP

exemple d'implémentation php d'une calculatrice avancée fonction (Basée sur la pile)

Utilisez jQuery pour implémenter une calculatrice simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!