Comment implémenter une version Web de la calculatrice en JS

Cet article présente principalement la méthode JS basée sur la récursivité pour implémenter la version web de la calculatrice. 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 forme de. exemples. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit la méthode d'implémentation de la version web de la calculatrice basée sur la récursivité JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

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

1. implémente l'apparence de la calculatrice, donnant à tout le monde Le bouton est lié à l'événement number(z) et la différence de z est transmise pour distinguer le bouton qui a déclenché 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), le innerHTML du DOM est utilisé pour réaliser l'affichage en temps réel de l'expression, et le contenu de la chaîne est utilisé pour stocker le clic. nombre ou symbole Lorsque "=" est cliqué Quand, appelez fact(content) 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), d'abord. utilisez content.indexOf("+") pour juger si le signe "+" existe ? Si tel est le cas, appelez récursivement les deux chaînes avant et après l'index et additionnez-les jusqu'à ce que "+" ne soit pas trouvé dans toutes les chaînes. Utilisez ensuite content.lastIndexOf("-") pour juger "-". ", l'opération suivante est la même que le signe plus. S'il y a un signe, 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é, commencez à juger le signe de multiplication et la division sign, et return parseFloat(content) jusqu'à ce qu'il n'y ait plus de signe , le contenu ici est la chaîne non signée après l'appel récursif, 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 l'intégralité du code. Deux points auxquels il faut prêter attention dans l'idée de conception sont :

1 Le signe plus et le signe de multiplication utilisent indexOf(), tandis que le signe moins. signe et signe de division utilisation de 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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser Vuex pour implémenter la gestion des menus

Comment utiliser Vue pour développer des composants d'arborescence

Interprétation détaillée des nouvelles fonctionnalités d'Angular5.1

Comment implémenter le packaging gulp à l'aide de nodejs

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!