자바스크립트로 계산기 코드를 구현하는 방법-프런트엔드 Q&A-php.cn

자바스크립트로 계산기 코드를 구현하는 방법

WBOY

풀어 주다： 2023-05-26 19:47:36

원래의

3229명이 탐색했습니다.

Javascript는 계산기를 포함한 많은 실용적인 응용 프로그램을 포함하여 프런트 엔드 개발에 널리 사용되는 프로그래밍 언어입니다. PC에서든 모바일에서든 JS에서 개발한 계산기들이 많이 사용되고 있습니다. 다음은 계산기 코드를 구현하는 몇 가지 방법을 소개합니다.

1. 기본 구조

계산기 코드 작성을 시작하기 전에 먼저 기본 구조를 이해해야 합니다. 일반적으로 계산기는 숫자, 연산자, 등호 및 지우기 키를 포함한 4개의 기본 버튼으로 구성됩니다. 이를 바탕으로 기본 HTML 구조를 설계할 수 있습니다.

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

로그인 후 복사

이 기본 구조에서는 계산기 클래스를 컨테이너로 정의합니다. screen 클래스의 input 태그는 계산 결과를 표시하는 데 사용됩니다. buttons 클래스의 버튼은 숫자, 연산자, 등호 및 키를 각각 지웁니다. 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();
});

로그인 후 복사

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

三、结论

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

2. 클릭 이벤트 처리🎜🎜위의 HTML 구조에서 다양한 버튼의 클래스 이름을 정의했습니다. 다음으로 해당 클릭 이벤트 처리 함수를 작성해야 합니다. 버튼을 클릭하면 다음 사항을 처리해야 합니다. 🎜

숫자 버튼인 경우 해당 숫자가 입력 필드에 표시되어야 합니다.
숫자 버튼인 경우; 연산자 버튼을 누르면 현재 입력을 결정해야 합니다. 숫자가 완전하고 해당 연산자가 저장되어 있는지 여부
클리어 키인 경우 입력 필드와 연산자 목록을 지우고 재설정해야 합니다. 입력 필드 내용을 0으로;

🎜다음으로 계산기 클래스를 정의하고 클래스에 다양한 처리 기능을 정의합니다. 🎜rrreee🎜이 코드에서는 계산기를 정의합니다. 클래스는 생성자를 사용하여 계산기의 상태를 초기화하고 다양한 처리 기능을 정의합니다. 이벤트를 처리하는 과정에서 각 버튼이 해당 클릭 이벤트에 응답할 수 있도록 querySelectorAll 및 addEventListener를 사용합니다. 🎜🎜3. 결론🎜🎜위는 Javascript에서 계산기 코드를 구현하는 기본 방법입니다. 이 프로세스에서는 먼저 기본 HTML 구조를 디자인한 다음 해당 클릭 이벤트 처리 함수를 작성하고 마지막으로 계산기 클래스를 초기화해야 합니다. 실제 개발에서는 보다 복잡한 계산기 기능을 달성하기 위해 실제 필요에 따라 해당 코드를 수정할 수 있습니다. 🎜

위 내용은 자바스크립트로 계산기 코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!