简易的JS计算器实现代码

下面是关于“简易的JS计算器实现代码”的完整攻略：

一、准备工作

要实现一个简易的JS计算器，首先需要在HTML文件中创建计算器的界面，其中需要包括如下组件：

计算器界面：使用HTML的div元素模拟。
显示框：显示计算结果。
操作按钮：包括加、减、乘、除等常见计算操作，使用HTML的button元素模拟。

在创建好计算器的界面后，需要在JS文件中获取各个操作按钮的ID，以方便后续操作，并使用addEventListener()方法为按钮添加点击事件监听器。

二、实现计算器的核心逻辑

数字按键事件

在计算器界面中，每个数字按钮被点击后，需要将其数字值显示在显示框中，即实现姆供了数字输入功能。为此，在JS文件中需要添加数字按键事件监听器，并在事件处理函数中使用JavaScript的DOM操作将按键事件中携带的数字值添加进显示框中。

示例代码如下：

const numButtons = document.querySelectorAll('.calc-button__num');
const output = document.querySelector('.calc-output');
numButtons.forEach(function(button) {
    button.addEventListener('click', function(event) {
        output.value += event.target.textContent;
    });
});

操作符按键事件

在计算器界面中，操作符按键被点击后，需要根据显示框中的数字值进行计算，并将计算结果显示在显示框中。为此，在JS文件中需要添加操作符按键事件监听器，并在事件处理函数中使用JavaScript实现计算器核心逻辑，包括数字的加减乘除等计算运算。

示例代码如下：

const operatorButtons = document.querySelectorAll('.calc-button__operator');
const calculate = function(a, b, operator) {
    switch (operator) {
        case '+':
            return a + b;
        case '-':
            return a - b;
        case '*':
            return a * b;
        case '/':
            return a / b;
        default:
            throw new Error(`Unknown operator ${operator}.`);
    }
};
let operand1 = null;
let operator = null;
operatorButtons.forEach(function(button) {
    button.addEventListener('click', function(event) {
        if (operand1 === null) {
            operand1 = Number(output.value);
            operator = event.target.textContent;
            output.value = '';
        } else {
            const operand2 = Number(output.value);
            const result = calculate(operand1, operand2, operator);
            operand1 = result;
            operator = event.target.textContent;
            output.value = '';
            output.value = result;
        }
    });
});

三、完整代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS Calculator</title>
    <style>
      .calc {
        display: flex;
        flex-wrap: wrap;
        width: 240px;
        margin: auto;
      }
      .calc__output {
        width: 100%;
        margin-bottom: 10px;
        font-size: 18px;
      }
      .calc-button {
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
        text-align: center;
        background-color: #fff;
        border: 1px solid transparent;
      }
      .calc-button:hover {
        background-color: #eee;
      }
      .calc-button.--operator {
        background-color: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <div class="calc">
      <input type="text" class="calc__output" />
      <button class="calc-button calc-button__num">7</button>
      <button class="calc-button calc-button__num">8</button>
      <button class="calc-button calc-button__num">9</button>
      <button class="calc-button calc-button__operator">+</button>
      <button class="calc-button calc-button__num">4</button>
      <button class="calc-button calc-button__num">5</button>
      <button class="calc-button calc-button__num">6</button>
      <button class="calc-button calc-button__operator">-</button>
      <button class="calc-button calc-button__num">1</button>
      <button class="calc-button calc-button__num">2</button>
      <button class="calc-button calc-button__num">3</button>
      <button class="calc-button calc-button__operator">*</button>
      <button class="calc-button calc-button__num">0</button>
      <button class="calc-button calc-button__operator">/</button>
      <button class="calc-button calc-button__operator">=</button>
      <button class="calc-button calc-button__operator">C</button>
    </div>
    <script>
      const numButtons = document.querySelectorAll('.calc-button__num');
      const operatorButtons = document.querySelectorAll('.calc-button__operator');
      const output = document.querySelector('.calc__output');
      const calculate = function(a, b, operator) {
        switch (operator) {
          case '+':
            return a + b;
          case '-':
            return a - b;
          case '*':
            return a * b;
          case '/':
            return a / b;
          default:
            throw new Error(`Unknown operator ${operator}.`);
        }
      };
      let operand1 = null;
      let operator = null;
      numButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
          output.value += event.target.textContent;
        });
      });
      operatorButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
          switch (event.target.textContent) {
            case '+':
            case '-':
            case '*':
            case '/':
              if (operand1 === null) {
                operand1 = Number(output.value);
              } else {
                const operand2 = Number(output.value);
                const result = calculate(operand1, operand2, operator);
                operand1 = result;
                output.value = result;
              }
              operator = event.target.textContent;
              output.value = '';
              break;
            case '=':
              if (operand1 !== null && operator !== null) {
                const operand2 = Number(output.value);
                const result = calculate(operand1, operand2, operator);
                operand1 = null;
                operator = null;
                output.value = result;
              }
              break;
            case 'C':
              operand1 = null;
              operator = null;
              output.value = '';
              break;
            default:
              throw new Error(`Unknown operator ${event.target.textContent}.`);
          }
        });
      });
    </script>
  </body>
</html>

以上是“简易的JS计算器实现代码”的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：简易的JS计算器实现代码 - Python技术站

简易的JS计算器实现代码

一、准备工作

二、实现计算器的核心逻辑

三、完整代码示例

相关文章