javascript怎么实现计算器代码

WBOY
发布: 2023-05-26 19:47:36
原创
3182 人浏览过

Javascript是一门广泛应用于前端开发的编程语言,其中包括了很多实用的应用,其中就包括了计算器。无论是在PC端还是在移动端,都有许多JS开发的计算器在使用。下面就是介绍一些实现计算器代码的方法。

一、基本结构

在开始编写计算器代码之前,我们首先应该了解一下它的基本结构。通常,一个计算器会由四个基本按钮组成,包括数字、操作符、等号和清除键。基于此,我们可以设计一个基本的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>
登录后复制

在这个基本结构中,我们定义了一个calculator类作为容器。screen类的input标签用来显示计算结果,buttons类的按钮分别对应数字、操作符、等号和清除键。

二、处理点击事件

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

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

接着,我们定义一个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类,使用构造函数初始化了计算器的状态,并定义了各种处理函数。在处理事件的过程中,我们使用了querySelectorAlladdEventListener,使得每个按钮都能够响应相应的点击事件。

三、结论

以上就是Javascript实现计算器代码的基本方法。在这个过程中,我们首先需要设计基本的HTML结构,然后编写相应的点击事件处理函数,最后初始化一个Calculator类。在实际开发中,我们可以根据实际需求修改对应的代码,实现更复杂的计算器功能。

以上是javascript怎么实现计算器代码的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板