计算器的主要作用是进行数字运算，开发一个计算器功能的web实例，有助于更好的掌握js基础的数字运算能力。本实例旨在帮助js计算能力有待提高的读者，通过自己一步一步开发完成计算器功能，熟悉js数字处理方法。
计算器的主要作用是进行数字运算，开发一个计算器功能的web实例，有助于更好的掌握js基础的数字运算能力。
本实例详细分析一个js计算器的开发步骤，学习本教程时最好先具备一些基础的js知识。
计算器包括显示数字区域和按键区域两大部分，先把计算器的这两个区域的html元素编写出来，如下所示：
读者可以自己编写一些样式，设计一个自己喜欢的计算器效果。本实例的计算器效果如下图所示：
样式代码：
对于新手来说，计算器功能看起来好像很复杂，那么多按钮、多种计算方式，不知如何开始。其实任何一个功能，只需要理清楚思路，一步一步编写代码，会发现实现起来都不难。
1 获取各个html元素
web前端不论要在页面上做什么，都要先获取页面上的各个DOM元素。看起来整个计算器的按钮较多，实际开发中可以使用事件代理来操作按钮，所以只获取所有按钮的容器元素即可。代码如下：
2 声明相关变量
在运算过程中，需要一些变量来进行辅助计算、存储结果和判断等，如下所示：
3 按键上添加点击事件
因为整个计算器按键较多，每一个按钮都单独绑定一个事件会显得太多，很繁琐，还会影响性能，且容易出错。所以刚才只获取了按键的外部容器 eCalculator。
再使用事件代理，就只需要在容器上添加点击事件，判断当前点击的按键是哪一个，再执行对应的计算即可。用鼠标点击按键的时候，可能会因为点得太快而选择了按键上的文字，因此还需要在外包容器上添加一个阻止默认行为的操作，代码如下所示：
3.1 获取点击的按键和值
通过事件函数传入的event参数，可以获取到鼠标点击的元素。再通过元素上的data-key和data-value属性判断鼠标点击的是哪一个按键以及它的值，如下所示：
3.2 判断按键及值，数字键和小数点执行输入操作
如果按键属性data-key是'Num'表示按下的是数字，'Point'表示小数点。
这些按键都是执行输入，因为数字有多个，所以把数字输入封装到fnInputNum函数中。再封装fnShowResult函数把数据显示到显示数字区域。如下所示：
这时候已经可以点击数字和小数点，输入到计算器显示屏上，如图所示：
3.3 加减乘除运算
计算器最基本的就是加减乘除运算。为了实现对数字进行加减乘除并计算结果功能，封装fnCountResult、fnBaseCount和fnEqual三个函数。
fnCountResult用于根据运算符计算结果；
fnBaseCount修改计算公式或计算结果；
fnEqual用于按下=号时计算结果，并重置数据。如下所示：
现在已经可以在计算器上做加减乘除的计算了，如图所示：
3.4 再给其他按键添加操作，代码如下所示：
4 绑定键盘事件
写到这里，计算器已经可以正常使用了。不过只能用鼠标点击按键操作效率不高，为了可以更快的使用计算器，还需要加上键盘事件，当按下对应按键时，执行操作，如下所示：
一个简单的计算器就完成了，如果以学习为目的话，建议不要直接复制代码，最好直接手动输入代码及注释，加深印象和提高学习效果。