Comment implémenter une version Web de la calculatrice en JS-js tutoriel-php.cn

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.

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. numéros différents.

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

Copier après la connexion 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;//让它实时显示 } } Copier après la connexion 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型的数值 } } } } } Copier après la connexion 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.

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

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