So implementieren Sie Rechnercode in Javascript-Front-End-Fragen und Antworten-php.cn

So implementieren Sie Rechnercode in Javascript

WBOY

Freigeben： 2023-05-26 19:47:36

Original

3184 Leute haben es durchsucht

Javascript ist eine Programmiersprache, die häufig in der Front-End-Entwicklung verwendet wird und viele praktische Anwendungen, einschließlich Taschenrechner, umfasst. Ob auf dem PC oder mobil, es sind viele von JS entwickelte Rechner im Einsatz. Im Folgenden finden Sie eine Einführung in einige Methoden zur Implementierung von Rechnercode.

1. Grundstruktur

Bevor wir mit dem Schreiben des Rechnercodes beginnen, sollten wir zunächst seine Grundstruktur verstehen. Normalerweise besteht ein Taschenrechner aus vier Grundtasten, darunter Zahlen, Operatoren, das Gleichheitszeichen und die Löschtaste. Auf dieser Grundlage können wir eine grundlegende HTML-Struktur entwerfen:

<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>

Nach dem Login kopieren

In dieser Grundstruktur definieren wir eine Calculator-Klasse als Container. Das Tag input der Klasse screen wird zur Anzeige von Berechnungsergebnissen verwendet. Die Schaltflächen der Klasse buttons entsprechen Zahlen, Operatoren, Gleichheitszeichen und Klare Tasten bzw. 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();
});

Nach dem Login kopieren

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

三、结论

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

2. Verarbeitung von Klickereignissen🎜🎜In der obigen HTML-Struktur haben wir die Klassennamen verschiedener Schaltflächen definiert. Als nächstes müssen wir die entsprechende Funktion zur Verarbeitung von Klickereignissen schreiben. Wenn auf eine Schaltfläche geklickt wird, müssen wir folgende Dinge erledigen: 🎜

Wenn es sich um eine numerische Schaltfläche handelt, muss die entsprechende Zahl im Eingabefeld angezeigt werden
Wenn ja; Bei einer Operatortaste muss die aktuelle Eingabe ermittelt werden. Ob die Nummer vollständig ist und ihre Operatoren gespeichert sind.
Wenn es sich um eine Löschtaste handelt, müssen Sie das Eingabefeld und die Operatorliste löschen und die zurücksetzen Inhalt des Eingabefelds auf 0;

🎜Als nächstes definieren wir eine Calculator-Klasse und definieren verschiedene Verarbeitungsfunktionen in der Klasse: 🎜rrreee🎜In diesem Code definieren wir einen Calculator Klasse, verwendet den Konstruktor, um den Zustand des Rechners zu initialisieren und verschiedene Verarbeitungsfunktionen zu definieren. Bei der Verarbeitung von Ereignissen verwenden wir querySelectorAll und addEventListener, damit jede Schaltfläche auf das entsprechende Klickereignis reagieren kann. 🎜🎜3. Fazit🎜🎜Das Obige ist die grundlegende Methode zur Implementierung von Taschenrechnercode in Javascript. In diesem Prozess müssen wir zunächst die grundlegende HTML-Struktur entwerfen, dann die entsprechende Funktion zur Verarbeitung von Klickereignissen schreiben und schließlich eine Calculator-Klasse initialisieren. In der tatsächlichen Entwicklung können wir den entsprechenden Code entsprechend den tatsächlichen Anforderungen ändern, um komplexere Rechnerfunktionen zu erreichen. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Rechnercode in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!