得，今天跟大家唠唠我最近瞎折腾的一个小玩意儿——一个身高对比的网站。也没啥高深的技术，就是自己琢磨着好玩儿，动手实践一下。
为啥想做这个？
起因挺简单的。有次看个啥节目，里面提到某个名人的身高，我就下意识想，这哥们儿跟我比，是高是矮？差多少？光凭数字没啥概念，就想着，要是有个能直观点儿看出来的工具就好。网上搜搜，有是有，但感觉要么太复杂，要么就是广告一堆，用着不爽。得，那干脆自己动手做一个得，反正闲着也是闲着。
开工前的准备
第一步，就是想明白要咋整。
我寻思着，这玩意儿的核心不就是输入一个身高，然后选个对比的对象，网站唰一下告诉你俩差多少，最好再给个图示，一眼就能看明白。思路清晰。
接下来就是找数据，这是个麻烦事儿。
名人身高：这个最头疼。网上信息五花八门，同一个明星能有好几个身高版本，有的还明显是瞎扯淡。我只能尽量找些看着靠谱点的来源，比如一些官方资料或者比较公认的数据。实在不行，就找个流传最广的数字先用着，心里也得打个问号。
各种事物：除名人，我还想加点别的，比如动物、建筑物、一些常见物品。比如长颈鹿多高？篮球框多高？这些数据相对好找点，但也要核实一下，不能张口就来。
找数据这块儿，真是花挺长时间，对着电脑屏幕眼睛都快看花。感觉就像在搞文献综述，只不过是查身高。
动手敲代码
数据准备得差不多，就开始动手做网页。咱也不是啥专业程序员，就懂点基础的前端玩意儿。
先把架子搭起来。
用最基础的 HTML 把页面结构弄出来：一个输入框让用户填身高，一些按钮或者下拉菜单让用户选对比对象，再留个地方显示结果。
然后加上点样式。
用 CSS 给页面稍微美化一下，不然白底黑字的太丑，自己看着都难受。调调颜色、字体、间距啥的，让它看起来稍微像个正经网页。
最关键的是让它动起来。
这部分主要靠 JavaScript。得写代码实现这几个功能：
获取用户输入的身高。
根据用户选的对比对象，从我之前整理的数据里找到对应的身高。
计算两个身高的差值。
把结果显示出来，比如“你比姚明矮XX厘米”。
这块儿写起来磕磕绊绊的，老出些意想不到的小问题。比如单位换算，用户可能输入米，也可能输入厘米，得统一处理。还有就是怎么把数据显示得清晰明，也是反复调整好几次。
加上可视化对比
光显示数字还不够直观，我一开始就想要个图形对比。
一开始想用复杂的图表库，后来觉得没必要。
就用最简单的办法，画两个条形图或者方块，高度就代表身高。一个代表用户，一个代表对比对象，并排放在一起，谁高谁矮，差多少，一目然。
这个实现起来也费点劲，主要是动态调整那个条形图的高度，得根据不同的身高数据实时计算。试好几种方法，用个比较笨但有效的办法搞定。
测试和完善
做完之后，我自己先反复试用。
输入各种奇怪的身高，选不同的对比对象，看看有没有bug，显示效果顺不顺眼。
然后让我几个朋友也帮着试试。
他们提些意见，比如：
“能不能加个某某某明星？”—— 数据找到就加上。
“手机上看有点变形。” —— 行，调整一下手机端的显示效果。
“对比的条颜色不好看。” —— OK，换个顺眼点的配色。
根据反馈，又修修改改好一阵子。感觉做东西就是这样，不断发现问题，不断解决问题。
最终成果
捣鼓出来的这个小网站，功能挺简单，就是输入身高，选择对象，然后看对比结果和图形。界面也弄得尽量简洁明。
虽然没啥技术含量，但整个过程做下来，还是挺有成就感的。从一个想法，到搜集资料，再到自己动手把它一步步实现，能跑起来用，这个过程本身就挺有意思。
现在有时候自己也会上去玩玩，看看自己跟某个历史人物或者某个动物比起来是啥样，还挺解闷的。也算是没白折腾。