今天小酌一杯，起了點點飛智，想用HTML/CSS/JS來山寨一個mac系統自帶的計算器。先給自己樹立兩個標桿：

【像眾泰學習】外觀、功能像素級拷貝為主，兼顧山寨氣質。

【像澤野螳螂學習】原曲不使用。（努力做到不借鑒任何現成的方案）

廢話不多說，現在開始。

首先，以下是原軟件的截圖。

來分析一下顏色：

1. 標題欄的三個按鈕目前暫無用處，暫時先不考慮。
2. 不考慮毛玻璃效果，我無意中截到的單色背景是#292929，字符顏色#ffffff。姑且先用這個。
3. 功能鍵區（AC、+/-、%）背景色#d6d6d6，字符顏色#000000。
4. 數字鍵區（0-9和小數點）背景色#e0e0e0。字符顏色#000000。
5. 運算符（+、-、*、/、=）背景色#f5923e，字符顏色#ffffff。
6. 全界面框線顏色#181818。
7. 按鍵區框線顏色#8e8e8e。

以及動畫效果：

1. 由於數字顯示區是毛玻璃的，因此背景是隨時變化的，這裏放棄了。
2. 按下鼠標鍵時，功能鍵區背景色顏色變為#a9a9a9，字符不變色。
3. 按下鼠標鍵時，數字鍵區背景色顏色變為#b2b2b2，字符不變色。
4. 按下鼠標鍵時，運算符區背景色顏色變為#c2732f，字符顏色變為#555555。

然後測量一下界面的大小：（我這個屏幕是Retina屏，計算出的像素數應用到實際界面要除以2。）

1. 整個界面（含框線）寬466像素，高642像素。
2. 整個界面的邊框寬度均為1像素，表格四個圓角半徑10像素。
3. 按鍵分割線寬度2像素。
4. 數字顯示區和按鍵區之間分割線寬度為0。
5. 按鍵區4列不等寬，不含分割線的寬度分別為112、114、114、118像素，是不是有點詭異。
6. 按鍵區5行也不等高，不含分割線前4行的高度為94像素，最後一行高96像素。

接下來是界面字體。（字體我很難做到像素級匹配）

1. 整體采用了San Francisco字體。
2. 數字顯示區字體是細字體，按鈕區是常規字體。
3. 字號大小：功能鍵區<數字鍵區<運算符區。
4. 數字鍵區的字符太長放不下時會自動壓縮大小。

下面操練起來吧。

首先，不考慮任何格式因素，先畫一個結構相符的表格。在這個表格裏實現這個計算器就可以。

<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是不能同時使用的。我又嘗試了幾種方案，找到了一條可行的思路：

1. 為按鍵區域設置border-spacing: 0；
2. 為左上和上部的按鈕單獨繪制所有邊框；
3. 為其它按鈕繪制右側和底部的邊框。

這乍看上去有點愚蠢，但似乎是唯一的思路。情況統一的按鈕可以合並處理從而減少一定的工作量。比如按鍵區中間的按鍵（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

山寨版計算器