7
JavaScript计算器
source link: https://greyli.com/javascript-calculator/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JavaScript计算器
用JavaScript做了一个计算器，大部分时间都花在完善样式和交互上了，现在还想着再给它添加一个主题。我发现，我喜欢把一个东西从丑变美的过程，好看比好用更吸引我。这不是一个好习惯……
优化交互、美化样式
在这个计算器里，用到了一些处理技巧，可以让它看起来更真实和漂亮。
计算器边缘阴影
这里使用box-shadow的inset方法，也就是把阴影内嵌到元素里，让计算器看起来是有厚度的：
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset -1px -6px 12px 0.1px #89847e;
参考内容：https://css-tricks.com/snippets/css/css-box-shadow/
按钮按下效果
其实是设置按钮的box-shadow，按下时把box-shadow设为none，同时按钮向下移动
button {
box-shadow: 1px 2px #666;
button:active {
box-shadow: none;
transform: translateY(4px);
按钮上的字不可选择
双击按钮或是拖动按钮选择会出现蓝色背景色，设置user-select去掉这个特性
.un-selectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
去掉按钮被选中后的蓝色边线
button:focus {outline:0;} /* 设为none效果相同，或加上 !important */
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK