JS实现计算器（一）

最新推荐文章于 2024-04-27 05:36:48 发布

coderAFan

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量1.4k

点赞数 3

分类专栏：前端组件文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_44140870/article/details/116062324

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

组件

2 篇文章 0 订阅

订阅专栏

JS实现简单计算器（一）

写个四则运算的函数很简单，实现一个计算器的页面真是累死个人。。。

能够进行简单的四则运算，效果基本与win10自带计算器相同。
第一版没有括号，平方，存储历史记录等功能，后续添加。。。
截图如下
在这里插入图片描述
思路：主要是将输入的运算式，中缀改后缀，然后运算得出结果。不过植入页面，会有输入输出各方面的一些小问题，导致代码变多了不少。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <h2>计算器1.0</h2>
  <div class="calc-wrap">
    <div class="calc-in-out">
      <!-- 上一条运算记录 -->
      <p class="calc-history" title=""></p>
      <!-- 运算等式 -->
      <p class="calc-in"></p>
      <!-- 输入的数字和输出的运算结果 -->
      <p class="calc-out active">0</p>
    </div>
    <table class="calc-operation">
      <thead></thead>
      <tbody>
        <tr>
          <td data-ac="cls" class="cls">C</td>
          <td data-ac="del">&larr;</td>
          <td data-ac="sq">x<sup>2</sup></td>
          <td data-ac="*">&times;</td>
        </tr>
        <tr>
          <td data-val="7">7</td>
          <td data-val="8">8</td>
          <td data-val="9">9</td>
          <td data-ac="/">&divide;</td>
        </tr>
        <tr>
          <td data-val="4">4</td>
          <td data-val="5">5</td>
          <td data-val="6">6</td>
          <td data-ac="+">+</td>
        </tr>
        <tr>
          <td data-val="1">1</td>
          <td data-val="2">2</td>
          <td data-val="3">3</td>
          <td data-ac="-">-</td>
        </tr>
        <tr>
          <td data-ac="per">%</td>
          <td data-val="0">0</td>
          <td data-ac="dot">.</td>
          <td data-ac="eq" class="eq">=</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="./index.js"></script>
</body>
</html>

CSS代码

body {
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
.calc-wrap {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.calc-operation {
  width: 100%;
  border-collapse: collapse;
}
.calc-operation td {
  padding: 10px;
  width: 25%;
  text-align: center;
  border: 1px solid #ddd;
  font-size: 26px;
  color: #888;
  cursor: pointer;
}

.calc-operation .cls {
  color: #ee8956;
}

.calc-operation td:active {
  background-color: #ddd;
}

.calc-in-out {
  width: 100%;
  padding: 10px 20px;
  text-align: right;
  box-sizing: border-box;
  background-color: rgba(250, 250, 250, 0.9);
}

.calc-in-out p {
  overflow: hidden;
  margin: 5px;
  width: 100%;
}

.calc-history {
  margin-left: -20px;
  font-size: 18px;
  color: #bbb;
  border-bottom: 1px dotted #ddf;
  min-height: 23px;
}

.calc-in,
.calc-out {
  font-size: 20px;
  color: #888;
  line-height: 39px;
  min-height: 39px;
}

.calc-in {
  color: #888;
}

.calc-out {
  color: #ccc;
}

.calc-in.active,
.calc-out.active {
  font-size: 34px;
  color: #666;
}

JS代码

var tds = document.getElementsByTagName('td');
var cls = document.getElementsByClassName('cls')[0];
var equal = document.getElementsByClassName('eq')[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])) {
          input.innerHTML = '';
        }
        output.innerHTML = this.dataset.val;
        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;
};

// 等于键事件
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];
}

coderAFan

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JS实现计算器（一）

JS实现简单计算器（一）写个四则运算的函数很简单，实现一个计算器的页面真是累死个人。。。能够进行简单的四则运算，效果基本与win10自带计算器相同。第一版没有括号，平方，存储历史记录等功能，后续添加。。。截图如下思路：主要是将输入的运算式，中缀改后缀，然后运算得出结果。不过植入页面，会有输入输出各方面的一些小问题，导致代码变多了不少。HTML代码<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫