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

目录

    • 一切都是为了好玩
    • 实现大体过程
      • 布局
      • 交互
      • 功能
    • 后续的思考

一切都是为了好玩

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

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

这里是项目的源码仓库

实现大体过程

既然要做成苹果手机上的那样,自然需要观察这一下计算器应用的图形界面
Web技术实现仿苹果手机计算器_第1张图片
图省事,把%和左边的正负好改成了一对圆括号,对应的效果是这样:
Web技术实现仿苹果手机计算器_第2张图片

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


布局

  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小冰获取我分享的最新实用、有趣的前端技术与资讯哦,也交个朋友哦

你可能感兴趣的:(有趣的前端)