JavaScript实现一个简易的计算器

淩亂°似流年 2022-09-23 10:56 238阅读 0赞

**写在最前的一些‘废话’**

大概从六月十号左右开始就一直在为期末考试（大部分）还有保研忙，本来计划的一个周至少有一天可以安心写代码，但发现计划赶不上变化，刚开始的第一周还可以有时间，但往后发现自己整个思维一直处于期末考的状态中，根本不适合写代码。好吧，我承认我对coding的各种要求都挺“无语”。  
期末考结束之后，又去苏大参加了几天夏令营，这么忙前忙后的持续了有一个月之久。从苏州回来，休息了两天，就到了17号。

自己期末复习的时候就一直想要写一个计算器，闲暇的时候也在想具体怎么实现，觉得应该不难，但就是想写。昨天终于可以开始动工，刚开始还以为实现出来需要一个周左右至少两天的时间，想着实现完我就可以先回家两天了。但没想到整个实现过程算比较顺利吧，昨天用了大概六个小时完成了从设计到具体实现。  
有大概一个月没怎么写代码了，整个大脑都不适应，反应也慢，一些基本的东西都有点模糊不清了。可能是原来就没有太理解，再加上没有其余练习，导致效率有些低。

**正文**

*实现代码：[http://codepen.io/crystalYY/pen/jAkNVz][http_codepen.io_crystalYY_pen_jAkNVz]*

***正常显示界面***  
![这里写图片描述][20160718090531621]

***错误提示界面***  
![这里写图片描述][20160718090604714]

**- 实现思路**

1.  使用`table`画出整个界面。  
    借鉴了其他人已经实现了的结构，发现他们有一些人没有直接在`td`里写1，2，3或者退格什么的，而是又嵌套了一个`button`，我其实到现在也没有太理解为什么要这样，只是在排版的时候感觉到有些作用：因为`margin`对`td` 不起作用，只能设置`padding`。
2.  使用`eval`函数计算最终结果，并捕获异常

`eval`函数第一次使用，w3c上对它的定义如下

> eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

有了这个函数得到最终结果就很容易了。我的思路是在用户输入要计算的式子时不加干预，最终的计算从`input`输入框中获取`value`值，然后把这个value值作为参数传递给`eval`，并使用`try catch(exception)`来捕获并处理异常。

3.通过事件代理绑定事件  
因为每个button都需要有一个点击事件，如果一个一个去绑定，会导致代码十分的不简洁，而且效率也非常低。这时就可以考虑使用事件代理，由于事件冒泡的原理，我们可以把点击事件绑定在table上，然后通过判断事件发生的具体对象来做出不同的反应，调用不同的函数。

4.其他效果  
可以根据自己的设计思路，添加其他的效果。我主要是添加了一个错误提示的动画：如果eval函数抛出异常，则从上面缓慢滑下一个图片，并且通过`setTimeout`来设置了停留的时间。

5.注意细节

*  在设置enter键按下获得结果的时候，`keydown`事件对象应该为整个table，并且应该阻止enter键的默认行为
 *  获取元素样式时需要写一个兼容函数，因为`obj.style.attr`只能获取行间样式，要像获取外部样式需要用`getComputedStyle(obj,false)[attr]`或兼容IE的`obj.currentStyle[attr]`。

[http_codepen.io_crystalYY_pen_jAkNVz]: http://codepen.io/crystalYY/pen/jAkNVz
[20160718090531621]: /images/20220720/d977fae0448c4f999ae335c4f95681b7.png
[20160718090604714]: /images/20220720/4db804e89f914f66a2ee7dd7533e461b.png