JS实现计算器（二）

JS实现简单计算器（二）

本次实现了1、退格键功能，2、保存显示上一条历史记录功能

未实现：1、括号，2、平方，百分号，小数点

JS实现简单计算器（一）

只改动了JS代码

var tds = document.getElementsByTagName('td');
var cls = document.getElementsByClassName('cls')[0];
var del = document.getElementsByClassName('del')[0];
var equal = document.getElementsByClassName('eq')[0];
var historyLog = document.getElementsByClassName('calc-history')[0];
var input = document.getElementsByClassName('calc-in')[0];
var output = document.getElementsByClassName('calc-out')[0];

let isAgainInput = true;
let res = 0;

// 给每一个按键添加事件
for (let i = 0; i < tds.length; i++) {
  tds[i].onclick = function () {
    // 重新输入
    if (isAgainInput) {
      if (this.dataset.val) {
        // 是否接着运算式中继续运算
        if (isNumber(input.textContent[input.textContent.length - 1])) {
          // 加入历史记录
          historyLog.innerHTML = input.innerHTML + '=' + output.innerHTML;
          input.innerHTML = '';
        }
        output.innerHTML = this.dataset.val;
        console.log(output);
        deleteZero();
        isAgainInput = false;
      } else {
        // 输入了运算符，就加到上面的运算式里
        input.innerHTML = output.innerHTML + this.dataset.ac;
      }
    } else {
      // 继续输入
      if (this.dataset.val) {
        // 输入的是数字就一直加
        output.innerHTML = output.innerHTML + this.dataset.val;
        deleteZero();
      } else {
        // 输入了运算符，就加到上面的运算式里，并清空output
        input.innerHTML = input.innerHTML + output.innerHTML + this.dataset.ac;
        output.innerHTML = '';
      }
    }
  };
}

// 判断字符是否是数字
function isNumber(ch) {
  return ch - '0' >= 0 && ch - '0' <= 9;
}

// 判断输入开头的0
function deleteZero() {
  let num = output.innerHTML;
  if (num.length > 1 && num[0] === '0') {
    output.innerHTML = num.slice(1);
  }
}

// 归零键事件
cls.onclick = function () {
  input.innerHTML = '';
  output.innerHTML = 0;
};

// 退格键事件
del.onclick = function () {
  if (!isAgainInput) {
    let num = output.textContent;
    if (num.length === 1) {
      output.innerHTML = '0';
    } else {
      output.innerHTML = num.slice(0, -1);
    }
  }
};

// 等于键事件
equal.onclick = function () {
  // 把output中还存在数字添加进运算式中
  input.innerHTML = input.innerHTML + output.innerHTML;
  let str = input.innerText || input.textContent;
  res = calculate(str);
  output.innerHTML = res;
  isAgainInput = true;
};

// 中缀表达式变后缀表达式
function changeToBack(str) {
  const stack = [];
  const res = [];
  const priority = {
    '+': 1,
    '-': 1,
    '*': 2,
    '/': 2,
  };
  for (let i = 0; i < str.length; i++) {
    let num = str[i] - '0';
    if (num >= 0 && num <= 9) {
      let { totalNum, index } = getNum(str, i);
      stack.push(totalNum);
      i = index;
    } else {
      // 是操作符
      // 栈为空，或操作符优先级大于栈顶，导入栈中
      if (
        stack.length === 0 ||
        priority[str[i]] > priority[stack[stack.length - 1]]
      ) {
        stack.push(str[i]);
      } else {
        do {
          res.push(stack.pop());
        } while (priority[str[i]] <= priority[stack[stack.length - 1]]);
        stack.push(str[i]);
      }
    }
  }
  while (stack.length) {
    res.push(stack.pop());
  }
  console.log(res);
  return res;
}

// 考虑多位数的情况
function getNum(str, index) {
  let totalNum = 0;
  while (true) {
    let n = str[index] - '0';
    if (n <= 9 && n >= 0) {
      totalNum = totalNum * 10 + n;
      index++;
    } else break;
  }
  return {
    totalNum,
    index: index - 1,
  };
}

// 计算表达式
function calculate(str) {
  arr = changeToBack(str);
  let stack = [];
  for (let i = 0; i < arr.length; i++) {
    if (typeof arr[i] === 'number') {
      stack.push(arr[i]);
    } else {
      let num2 = stack.pop();
      let num1 = stack.pop();
      if (arr[i] == '+') {
        stack.push(num1 + num2);
      } else if (arr[i] == '-') {
        stack.push(num1 - num2);
      } else if (arr[i] == '*') {
        stack.push(num1 * num2);
      } else if (arr[i] == '/') {
        stack.push(num1 / num2);
      }
    }
  }
  return stack[0];
}