除了日常的画画页面、写写业务代码之外，难道程序员就不能有点乐趣了嘛？我刷着手机瞟见了计算器：苹果手机的计算器果然漂亮，简约大气上档次，何不做一个？于是有了这篇文章。
这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战
实现大体过程
既然要做成苹果手机上的那样，自然需要观察这一下计算器应用的图形界面
图省事，把%和左边的正负好改成了一对圆括号，改造后效果如下：
我们只需要先绘制出相应的布局即可。有几点需要注意：
- 输入区域，防止数字或运算符输入过多导致内容溢出
- 结果输出区域，防止结果太长导致内容溢出
- 按键，大多为圆形，只有一个为胶囊型,并且胶囊按键尺寸刚好等于两个原型按键加上间距
有几种布局方案：
- 浮动布局，前四行排4个，最后一行排3个，需要给圆按键和胶囊按键设置好宽度和占据的高度,同时设置外边距支撑间距
- flex弹性布局，前四行排4个，最后一行排3个，需要给圆按键和胶囊按键设置好宽度和占据的高度，内容对齐设置为等距对齐即可.
flex布局相对浮动布局代码要精简一些，因此决定采用flex布局
交互与功能
交互
- 按键按下（pc端浏览器应该是点击），按键有色彩变化
- 按键按下时亦有按键音
- 鼠标hover时改变按键的背景色和颜色，同时播放一段准备的音频（audio元素）
功能
- 按键输入数字和运算符的组合，输入区域展示相应的输入
- 按下
=键，计算结果并显示在输出区域 - 按下
AC键清除输入和上次计算的结果 - 如果输入有误，则输出区域提示错误
给按键注册UI事件（点击），按下=键则运算结果 （简单起见直接通过JavaScript里的eval函数来运算），其他键则d当做输入，每次输入刷新视图
这里是
最后
奉上项目源码， 感谢阅读
