How to implement calculator code in javascript-Front-end Q&A-php.cn

How to implement calculator code in javascript

WBOY

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

Original

3185 people have browsed it

Javascript is a programming language widely used in front-end development, including many practical applications, including calculators. Whether on PC or mobile, there are many calculators developed by JS in use. The following is an introduction to some methods of implementing calculator code.

1. Basic structure

Before starting to write the calculator code, we should first understand its basic structure. Typically, a calculator will consist of four basic buttons, including numbers, operators, the equal sign, and the clear key. Based on this, we can design a basic HTML structure:

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

Copy after login

In this basic structure, we define a calculator class as a container. The input tag of the screen class is used to display calculation results, and the buttons class buttons correspond to numbers, operators, equal signs and clear keys respectively.

2. Processing click events

In the above HTML structure, we have defined the class names of various buttons. Next, we need to write the corresponding click event processing function. If a button is clicked, we need to handle the following things:

If it is a numeric button, the corresponding number needs to be displayed in the input field;
If it is an operator button, it needs to determine the current Whether the entered number is complete and its operators are saved;
If it is a clear key, the input field and operator list need to be cleared, and the input field content is reset to 0;
If it is the equal sign key, the current expression needs to be calculated and the result displayed in the input field.

Next, we define a Calculator class and define various processing functions in the class:

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();
});

Copy after login

In this code, we define a # The ##Calculator class uses the constructor to initialize the state of the calculator and defines various processing functions. In the process of handling events, we use querySelectorAll and addEventListener so that each button can respond to the corresponding click event.

3. Conclusion

The above is the basic method of implementing calculator code in Javascript. In this process, we first need to design the basic HTML structure, then write the corresponding click event processing function, and finally initialize a

Calculator class. In actual development, we can modify the corresponding code according to actual needs to achieve more complex calculator functions.

The above is the detailed content of How to implement calculator code in javascript. For more information, please follow other related articles on the PHP Chinese website!