JS utilise la récursion pour implémenter une simple calculatrice sur la page Web

Cette fois, je vais vous présenter l'utilisation de la récursivité en JS pour implémenter une calculatrice simple sur la page Web. Quelles sont les précautions concernant l'utilisation de la récursivité en JS pour implémenter une calculatrice simple dans la version Web. . Voici un cas pratique, jetons un coup d'oeil.

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 transmet la différence en z pour distinguer le bouton qui a déclenché l'événement.

Mettez-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 des nombres différents.

+ - * / = 1 2 3 4 5 6 7 8 9

Copier après la connexion 2. Dans la méthode number(z), utilisez innerHTML du DOM pour réaliser l'affichage en temps réel de expression , et utilisez le contenu string pour stocker le nombre ou le symbole cliqué. . Lorsque vous cliquez sur "=", 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;//让它实时显示 } } Copier après la connexion 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 laissez-les être ajoutés jusqu'à ce que "+" ne soit pas trouvé dans toutes les chaînes, puis commencez à utiliser content.lastIndexOf("-") pour juger le signe "-" L'opération suivante est la même que le signe plus s'il y en a un. , récurez les deux chaînes avant et après l'index, et laissez-les soustraire jusqu'à ce qu'aucun signe moins ne soit trouvé, puis commencez à juger le signe de multiplication et le signe de division, et revenez parseFloat(content) jusqu'à ce qu'il n'y ait plus de signe. Le contenu ici est le non signé. chaîne 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型的数值 } } } } } Copier après la connexion Ce qui précède est tout le 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 et le signe de division utilisent lastIndexOf() .

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

S'il utilise indexOf() , divisez d'abord la chaîne en fact("3")-fact("2-1") , le premier "3" n'est pas signé, et lors de l'appel de fact de manière récursive, il renvoie parseFloat( "3") , et lorsque l'appel récursif suivant est effectué, il deviendra parseFloat("2")-parseFloat("1")＝1 , c'est fact("2- La valeur de retour de 1") , le résultat final est 2, ce qui équivaut à : 3-(2-1).

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

Il en va 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 la multiplication. signe, indexOf() peut être utilisé.

2. La multiplication et la division se trouvent dans la couche interne du jugement, et l'addition et la soustraction se trouvent 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é à propos de cette calculatrice : (Vous pouvez aussi y penser)

1. Lorsque vous associez des événements à des boutons, utilisez l'événement mode proxy . 2. Quels attributs ou méthodes utilisés doivent prendre en compte les problèmes de compatibilité du navigateur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

JS utilise la récursion pour implémenter une simple calculatrice sur la page Web