javascript模拟实现计算器

为了让大家更好地理解，我先解释一下什么是JavaScript模拟实现计算器，然后再提供完整攻略。

JavaScript模拟实现计算器，是指使用JavaScript语言来模拟实现一个计算器的功能，可以通过输入数字、运算符和特殊符号等来进行基本的数学运算，如加、减、乘、除以及求余数等。

现在来说一下实现这个功能的具体攻略：

1. HTML 部分

首先在 HTML 中创建相应的按钮，分别对应数字、运算符、特殊符号以及等号等。例如：

<button id="num1">1</button>
<button id="num2">2</button>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="equal">=</button>

1. JavaScript 部分

接着，需要编写相应的 JavaScript 代码，来完成计算器的逻辑计算。具体来说，大致流程分为以下几步：

（1）定义变量，记录要进行计算的数值、运算符和结果等等。

（2）给按钮添加点击事件，分别监听数字、运算符和特殊符号的点击事件。在点击事件中，获取当前按钮的值，然后进行相关的处理。

（3）核心的逻辑处理部分，主要考虑以下几个方面：

（a）数字的处理。

将点击的数字记录到变量中，依次记录，每点击一次，在变量后面添加相应的数字。

（b）运算符的处理。

将点击的运算符记录到变量中，这里需要考虑到多种情况的处理。例如，如果在已经选择了一个操作数的情况下，又选择了另外一个操作数，那么需要先进行运算并将结果记录到变量中。同时，如果输入一个新的运算符，需要将之前记录的运算符更新。

（c）特殊符号的处理。

特殊符号主要包括小数点以及删除键、重置键等等。对于小数点，需要考虑其只能为当前数字添加一个小数点，而且不能连续添加；对于删除键，需要将数字末尾一个一个删除，同时需要判断当前状态，如果是在输入操作符的状态，还需要同步更新操作符；对于重置键，需要清空所有的数字和运算符等。

（d）等于号的处理。

在点击“=”号的时候，需要考虑以上所有的情况，进行最终的运算，并将结果显示到页面上。

下面是一个示例：

let num1 = 0; // 被操作数
let num2 = 0; // 操作数
let operator = ""; // 操作符
let result = null; // 运算结果
let startNewNum = false;

const numButtons = document.querySelectorAll(".num");
const operatorButtons = document.querySelectorAll(".operator");
const specialButtons = document.querySelectorAll(".special");

const display = document.getElementById("display");

const updateDisplay = () => {
  let text = "";
  if (num2) {
    text = num2.toString();
  }
  display.innerText = text;
};

numButtons.forEach((button) =>
  button.addEventListener("click", (event) => {
    if (startNewNum) {
      num2 = null;
      startNewNum = false;
    }
    const { target } = event;
    const value = target.value;
    num2 = parseFloat(num2 ? num2 + value : value);
    updateDisplay();
  })
);

operatorButtons.forEach((button) =>
  button.addEventListener("click", (event) => {
    const { target } = event;
    const value = target.value;
    if (operator) {
      if (typeof num2 === "number") {
        result = eval(num1 + operator + num2);
        num1 = result;
        num2 = null;
        operator = value;
        updateDisplay();
      }
    } else {
      num1 = num2;
      num2 = null;
      operator = value;
      updateDisplay();
    }
  })
);

specialButtons.forEach((button) =>
  button.addEventListener("click", (event) => {
    const { target } = event;
    const value = target.value;
    switch (value) {
      case "decimal":
        if (num2 && !num2.toString().includes(".")) {
          num2 = parseFloat(num2 + ".");
        }
        break;
      case "clear":
        num1 = 0;
        num2 = 0;
        operator = "";
        break;
      case "delete":
        if (num2) {
          num2 = num2.toString().slice(0, -1);
        }
        break;
      case "equal":
        if (operator) {
          if (typeof num2 === "number") {
            result = eval(num1 + operator + num2);
            num1 = result;
            num2 = null;
            operator = "";
            startNewNum = true;
            updateDisplay();
          }
        }
        break;
    }
    updateDisplay();
  })
);

以上是一个基础的JavaScript模拟实现计算器的攻略，并且添加了带显示的核心逻辑示例，你可以根据需要进行相应的修改和扩展。