JavaScript计算器

用JavaScript做了一个计算器,大部分时间都花在完善样式和交互上了,现在还想着再给它添加一个主题。我发现,我喜欢把一个东西从丑变美的过程,好看比好用更吸引我。这不是一个好习惯……calculator
Demo:https://greyli.github.io/calculator/
源码:https://github.com/greyli/calculator

 

优化交互、美化样式

在这个计算器里,用到了一些处理技巧,可以让它看起来更真实和漂亮。

计算器边缘阴影

这里使用box-shadow的inset方法,也就是把阴影内嵌到元素里,让计算器看起来是有厚度的:

参考内容:https://css-tricks.com/snippets/css/css-box-shadow/

按钮按下效果

其实是设置按钮的box-shadow,按下时把box-shadow设为none,同时按钮向下移动

按钮上的字不可选择

双击按钮或是拖动按钮选择会出现蓝色背景色,设置user-select去掉这个特性

去掉按钮被选中后的蓝色边线

 

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*