Web技术实现仿苹果手机计算器

一切都是为了好玩

除了日常的画画页面、写写业务代码，工作之余，一直关注并尝试着在前端做一些好玩有趣的东西，也经常逛各种社区网站寻找灵感，今天搬弄着手机想，为何不做一个手机计算器的web版呢？稍微想了一下大体实现思路，于是一款web应用诞生了：

会写代码真好：代码绘制精美的计算器

这里是项目的源码仓库

实现大体过程

既然要做成苹果手机上的那样，自然需要观察这一下计算器应用的图形界面

图省事，把%和左边的正负好改成了一对圆括号，对应的效果是这样：

对应的布局相信很多人都能做出来，不算难！也有几个关键点以及细节：

---

布局

1. 输入区域，防止数字或运算符输入过多导致内容溢出
2. 结果输出区域，防止结果太长导致内容溢出
3. 按键，大多为圆形，只有一个为胶囊型,并且胶囊按键尺寸刚好等于两个原型按键加上间距

可以采用的布局方案有：

• 浮动布局，前四行排4个，最后一行排3个，需要给圆按键和胶囊按键设置好宽度和占据的高度,同时设置外边距支撑间距
• flex弹性布局，前四行排4个，最后一行排3个，需要给圆按键和胶囊按键设置好宽度和占据的高度，内容对齐设置为等距对齐即可.

综合采用了flex弹性布局，因为稍微简洁一些

交互

1. 按键按下（pc端浏览器应该是点击），按键有色彩变化
2. 按键按下时亦有按键音

鼠标hover时改变按键的背景色和颜色，同时播放一段准备的音频（audio元素）

功能

1. 按键输入数字和运算符的组合，输入区域展示相应的输入
2. 按下=键，计算结果并显示在输出区域
3. 按下AC键清除输入和上次计算的结果
4. 如果输入有误，则输出区域提示错误

给按键注册UI事件（点击），按下=键则运算结果 （简单起见直接通过JavaScript里的eval函数来运算），其他键则d当做输入，每次输入刷新视图

后续的思考

这个项目虽不难，但是花费我不少的时间，一部分时间在思考尽可能多的布局方式，自适应盒子的大小布局，通过JavaScript调整大小以做到圆形形状，虽然最终都没有采用那些方案，但是思考的同时也拓展了自己，让自己可以轻易地跳出某些局限性，尝试更多的可能。

---

感谢阅读，如果有兴趣欢迎加入本人的公众号：web小冰获取我分享的最新实用、有趣的前端技术与资讯哦，也交个朋友哦