山寨版计算器
2018-07-09 13:45:51来源:博客园 阅读 ()
今天小酌一杯,起了点点飞智,想用HTML/CSS/JS来山寨一个mac系统自带的计算器。先给自己立两个flag:
【像众泰学习】外观、功能像素级拷贝为主,兼顾山寨气质。
【像泽野螳螂学习】原曲不使用。(努力做到不借鉴任何现成的方案)
废话不多说,现在开始。
首先,以下是原软件的截图。
来分析一下颜色:
- 标题栏的三个按钮目前暂无用处,暂时先不考虑。
- 不考虑毛玻璃效果,我无意中截到的单色背景是#292929,字符颜色#ffffff。姑且先用这个。
- 功能键区(AC、+/-、%)背景色#d6d6d6,字符颜色#000000。
- 数字键区(0-9和小数点)背景色#e0e0e0。字符颜色#000000。
- 运算符(+、-、*、/、=)背景色#f5923e,字符颜色#ffffff。
- 全界面框线颜色#181818。
- 按键区框线颜色#8e8e8e。
以及动画效果:
- 由于数字显示区是毛玻璃的,因此背景是随时变化的,这里放弃了。
- 按下鼠标键时,功能键区背景色颜色变为#a9a9a9,字符不变色。
- 按下鼠标键时,数字键区背景色颜色变为#b2b2b2,字符不变色。
- 按下鼠标键时,运算符区背景色颜色变为#c2732f,字符颜色变为#555555。
然后测量一下界面的大小:(我这个屏幕是Retina屏,计算出的像素数应用到实际界面要除以2。)
- 整个界面(含框线)宽466像素,高642像素。
- 整个界面的边框宽度均为1像素,表格四个圆角半径10像素。
- 按键分割线宽度2像素。
- 数字显示区和按键区之间分割线宽度为0。
- 按键区4列不等宽,不含分割线的宽度分别为112、114、114、118像素,是不是有点诡异。
- 按键区5行也不等高,不含分割线前4行的高度为94像素,最后一行高96像素。
接下来是界面字体。(字体我很难做到像素级匹配)
- 整体采用了San Francisco字体。
- 数字显示区字体是细字体,按钮区是常规字体。
- 字号大小:功能键区<数字键区<运算符区。
- 数字键区的字符太长放不下时会自动压缩大小。
下面操练起来吧。
首先,不考虑任何格式因素,先画一个结构相符的表格。在这个表格里实现这个计算器就可以。
<table> <tr><td id="display" colspan="4">0</td></tr> <tr> <td>AC</td> <td>+/-</td> <td>%</td> <td>?</td> </tr> … <tr> <td colspan="2">0</td> <td>.</td> <td>=</td> </tr> </table>
可以得到以下的界面:
下面是颜色匹配。在分析时我们已经按颜色把按键区分成了功能键区、运算符区和数字键区,所以这里就可以为每个按钮添加一个class来指定它所对应的按键区域。字符显示区与按键不同,单独提。比如:
<style> .digit {background-color=#e0e0e0} </style> … <td class="digit">2</td>
添加动画:
<style> .digit:active {background-color: #a9a9a9} </style>
此时界面就上好色了:
下面考虑边框问题,如果简单处理:
table { border-radius: 5px; border: 0.5px solid #181818; } td { border: 1px solid #8e8e8e; }
得到的结果肯定不是所希望的:
这是因为HTML管理元素的“margin-border-padding”机制,也就是盒子模型,使得单线表格的实现方式并不是那么直接,尝试一下border:collapse: collapse:
圆角被顶没了?很遗憾,collapse与border-radius是不能同时使用的。我又尝试了几种方案,找到了一条可行的思路:
- 为按键区域设置border-spacing: 0;
- 为左上和上部的按钮单独绘制所有边框;
- 为其它按钮绘制右侧和底部的边框。
这乍看上去有点愚蠢,但似乎是唯一的思路。情况统一的按钮可以合并处理从而减少一定的工作量。比如按键区中间的按键(8、9、5、6、2、3)可以:
.center { border-right: 1px solid #8e8e8e; border-bottom: 1px solid #8e8e8e; }
接下来设置界面的大小,需要注意的是,table中td的width包含内容的宽度和两次边框的宽度(高度也是),而我们在测量原版软件时的宽度值是除两侧边框之外的宽度,因此这里设置width时要减去边框的宽度,比如最左侧一列按钮,有左侧0.5像素和右侧1像素的边框,因此原宽度56要减去1.5。
.left { border-left: 0.5px solid #181818; border-right: 1px solid #8e8e8e; border-bottom: 1px solid #8e8e8e; width: 54.5px; height: 46px; }
就快成功了,字体只说一点:用之前一定看看它是否免费许可。鉴于我只是写来玩玩出于对苹果的崇敬才用的这个字体,苹果大大是不会打我屁屁的,但是你要在你的网站里未经许可使用了付费字体,你会很受伤。还有界面里的字体我没有做到像素对齐,是懒了。(逃
众泰Z700既视感有没有。就问你像不像〇〇〇〇 ?
to be continued
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:初尝微信小程序2-基本框架
下一篇:css画正六边形
- HTML连载88-今天把努比亚界面仿真写完了(完结连载) 2020-05-14
- 学习WEB标准的技能 2020-03-25
- 当年自学web前端的时候走了很多弯路,今天分享给大家 2020-03-09
- 随机点名 2019-12-09
- 从今天开始写博客了 2019-10-28
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash