Comment implémenter le code de la calculatrice en javascript-Questions et réponses frontales-php.cn

Comment implémenter le code de la calculatrice en javascript

WBOY

Libérer： 2023-05-26 19:47:36

original

3154 Les gens l'ont consulté

Javascript est un langage de programmation largement utilisé dans le développement front-end, comprenant de nombreuses applications pratiques, notamment des calculatrices. Que ce soit sur PC ou mobile, de nombreuses calculatrices développées par JS sont utilisées. Ce qui suit est une introduction à certaines méthodes d’implémentation du code de la calculatrice.

1. Structure de base

Avant de commencer à écrire le code de la calculatrice, nous devons d'abord comprendre sa structure de base. En règle générale, une calculatrice se compose de quatre boutons de base, dont les chiffres, les opérateurs, le signe égal et la touche d'effacement. Sur cette base, nous pouvons concevoir une structure HTML de base :

<div class="calculator">
  <input class="screen" readonly>
  <div class="buttons">
    <button class="number">0</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="op">+</button>
    <button class="number">3</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="op">-</button>
    <button class="number">6</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="op">*</button>
    <button class="number">9</button>
    <button class="op">.</button>
    <button class="op">/</button>
    <button class="clear">C</button>
    <button class="equal">=</button>
  </div>
</div>

Copier après la connexion

Dans cette structure de base, nous définissons une classe calculatrice en tant que conteneur. La balise input de la classe screen permet d'afficher les résultats des calculs. Les boutons de la classe buttons correspondent à des nombres, des opérateurs, des signes égal et. Effacer les touches respectivement. calculator类作为容器。screen类的input标签用来显示计算结果，buttons类的按钮分别对应数字、操作符、等号和清除键。

二、处理点击事件

在上述HTML结构中，我们已经定义了各类按钮的类名，接下来我们需要编写相应的点击事件处理函数。如果一个按钮被点击，我们需要处理如下事情：

如果是数字按钮，需要在输入栏中显示相应数字；
如果是操作符按钮，需要判断当前输入的数字是否已经完整，并将其运算符保存下来；
如果是清除键，需要清空输入栏和运算符列表，并将输入栏内容重置为0；
如果是等号键，需要计算当前的表达式并将结果显示在输入栏上。

接着，我们定义一个Calculator类，将各种处理函数定义在类中：

class Calculator {
  constructor() {
    this.result = 0;
    this.operator = null;
    this.input = '';
    this.screen = document.querySelector('.screen');
  }

  addNumber(number) {
    this.input += number;
    this.updateScreen();
  }

  updateScreen() {
    this.screen.value = this.input;
  }

  addOperator(operator) {
    if (this.input !== '') {
      this.operator = operator;
      this.result = parseFloat(this.input);
      this.input = '';
      this.updateScreen();
    }
  }

  calculate() {
    if (this.operator !== null && this.input !== '') {
      switch (this.operator) {
        case '+':
          this.result += parseFloat(this.input);
          break;
        case '-':
          this.result -= parseFloat(this.input);
          break;
        case '*':
          this.result *= parseFloat(this.input);
          break;
        case '/':
          this.result /= parseFloat(this.input);
          break;
      }
      this.operator = null;
      this.input = this.result.toString();
      this.updateScreen();
    }
  }

  clear() {
    this.result = 0;
    this.operator = null;
    this.input = '';
    this.updateScreen();
  }
}

const calculator = new Calculator();

document.querySelectorAll('.number').forEach(button => {
  button.addEventListener('click', () => {
    calculator.addNumber(button.innerText);
  });
});

document.querySelectorAll('.op').forEach(button => {
  button.addEventListener('click', () => {
    calculator.addOperator(button.innerText);
  });
});

document.querySelector('.equal').addEventListener('click', () => {
  calculator.calculate();
});

document.querySelector('.clear').addEventListener('click', () => {
  calculator.clear();
});

Copier après la connexion

在这个代码中，我们定义了一个Calculator类，使用构造函数初始化了计算器的状态，并定义了各种处理函数。在处理事件的过程中，我们使用了querySelectorAll和addEventListener，使得每个按钮都能够响应相应的点击事件。

三、结论

以上就是Javascript实现计算器代码的基本方法。在这个过程中，我们首先需要设计基本的HTML结构，然后编写相应的点击事件处理函数，最后初始化一个Calculator

2. Gestion des événements de clic🎜🎜Dans la structure HTML ci-dessus, nous avons défini les noms de classe de différents boutons. Ensuite, nous devons écrire la fonction de traitement des événements de clic correspondante. Si un bouton est cliqué, nous devons gérer les choses suivantes : 🎜

S'il s'agit d'un bouton numérique, le numéro correspondant doit être affiché dans le champ de saisie
S'il s'agit d'un bouton numérique ; un bouton d'opérateur, la saisie actuelle doit être déterminée Si le numéro est complet et ses opérateurs sont enregistrés ;
S'il s'agit d'une touche d'effacement, vous devez effacer le champ de saisie et la liste des opérateurs, et réinitialiser le contenu du champ de saisie à 0 ;

🎜Ensuite, nous définissons une classe Calculatrice et définissons diverses fonctions de traitement dans la classe : 🎜rrreee🎜Dans ce code, nous définissons une Calculatrice classe, utilise le constructeur pour initialiser l'état de la calculatrice et définit diverses fonctions de traitement. Dans le processus de gestion des événements, nous utilisons querySelectorAll et addEventListener afin que chaque bouton puisse répondre à l'événement de clic correspondant. 🎜🎜3. Conclusion🎜🎜Ce qui précède est la méthode de base pour implémenter le code de la calculatrice en Javascript. Dans ce processus, nous devons d'abord concevoir la structure HTML de base, puis écrire la fonction de traitement des événements de clic correspondante et enfin initialiser une classe Calculatrice. En développement réel, nous pouvons modifier le code correspondant en fonction des besoins réels pour réaliser des fonctions de calculatrice plus complexes. 🎜

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!