简单JS计算器实现代码

看看手机里的计算器，分为普通计算器和科学计算器

如果觉得头不够大，可以实现一个普通版(支持加减乘除等基本连续运算，但不提供括号功能)

看图形效果：

一、知识准备

1 1=?

通常，当我们看到这个表情时，我们都知道如何操作，知道操作结果

但计算机不同，计算机无法识别这串表达式，它只能识别具体的规则：前缀表达式1 1或后缀表达式1 1

给我一个栗子

(3 4) 5-6是中缀表达式- 3 4 5 6前缀表达式和345 6后缀表达式

因此，为了实现程序的自动运行，我们需要将输入数据转换成前缀或后缀表达式

这里不讨论前缀、中缀、后缀表达和相互转换方法的概念，但这篇博文说得很清楚

因此，在这个计算器的实现中，采用了后缀表达式的实现。参考上面的文章，关注这两个算法：

类似于转换为前缀表达式，遵循以下步骤：(1)初始化两个栈：用于存储中间结果的运算符栈S1和栈S2；(2)从左到右扫描中缀表达式；(3)遇到操作数时，将其压入S2；(4)当遇到一个运算符时，将其优先级与S1栈顶运算符进行比较：(4-1)如果S1为空，或者栈顶运算符为左括号“(”)，则该运算符直接放在栈上；(4-2)否则，如果优先级高于栈顶运算符，则按运算符进入S1(注意转换为前缀表达式时优先级更高或相同，但这里不包括相同情况)；(4-3)否则，弹出S1顶级运营商，压入S2，再转到(4-1)，与S1新顶级运营商对比；(5)遇到括号时：(5-1)如果是左括号“(”，直接按S1；(5-2)如果是右括号“)”，依次弹出S1栈顶的运算符，按S2直到遇到左括号，此时弃掉这一对括号；(6)重复步骤(2)至(5)，直到表达式的最右边部分；(7)依次弹出S1剩余运营商，压入S2；(8)S2元素依次弹出输出，结果的逆序为中缀表达式对应的后缀表达式(转换为前缀表达式时不需要逆序)。

类似于前缀表达式，只是顺序是从左到右：从左到右扫描表达式。遇到数字时，将数字推入堆栈。遇到运算符时，弹出栈顶的两个数字，用运算符对其进行相应的计算(第二个top元素op top元素)，将结果放在栈上；重复上述过程，直到表达式的最右端，最后的值就是表达式的结果。例如后缀表达式“3 4 56-”:(1)从左向右扫描，按3和4进入堆栈；(2)遇到运算符时，弹出4和3(4是栈顶元素，3是第二个顶元素，注意和前缀表达式比较)，计算3和4的值，得到7，然后把7放在栈上；(3)将5个放在堆栈上；(4)接下来是运算符，于是弹出5和7，计算75=35，把35放在栈上；(5)将6放在堆栈上；(6)最后是-运算符，它计算35-6的值，即29，从而得到最终结果。

二、实施过程

当然，第一步是构建计算器的页面结构，这不是一个科学的计算器。它只提供基本的操作功能，但也可以立即执行操作，显示完整的中缀表达式，并保存操作后的最后一条操作记录。

首先我想说：我本来想实现小数点功能，但是小数点的存在给数据存储和数据显示的实现带来了压力。实现过程真的很大，我干脆先取消这个功能。

1.页面结构：

h5计算计算/h5！-计算器-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 '/p/div table class=' calc-operation ' ad/ad t body tr TD data-AC=' cls ' c/TD TD data-AC=' del 'TD data-AC=' sq ' xs up 2/sup/TD TD TD TD data-AC=' mul '/TD/tr TD data-val=' 7 ' 7/TD TD TD data-val=' 8 ' 8/TD TD TD TD data-val=' 9 ' 9/TD TD TD