構建一個計算器：UI介面設計

摘要： 從這篇文章開始，將會花幾篇文章的篇幅來介紹如何構建一個線上的計算器，將前面學習的一些知識串在一起，通過實戰加強對理論知識的理解。實現計算器主要分為兩個部分，一個是構建計算器的UI，另一個通過JavaScript實現計算器的功能。在完成這兩個部分內容的學習，建議您需要對下面的幾個知識點有所瞭解：...

從這篇文章開始，將會花幾篇文章的篇幅來介紹如何構建一個線上的計算器，將前面學習的一些知識串在一起，通過實戰加強對理論知識的理解。實現計算器主要分為兩個部分，一個是構建計算器的UI，另一個通過JavaScript實現計算器的功能。在完成這兩個部分內容的學習，建議您需要對下面的幾個知識點有所瞭解：

• ofollow,noindex" target="_blank">網格佈局
• 漸變

這兩個部分可以幫助你快速完成計算器的UI效果。

• if/else 語句
• for 迴圈
• JavaScript函式
• ES6的箭頭函式
• && 和 || 操作符
• 如何使用 textContent 屬性來更改文字
• 如何使用事件委託模式來新增事件偵聽器

這篇文章的目的是通過構建一個簡單的計算器來幫助大家如何把學到的知識點串起來，能學習致用。

構建計算器的UI

在這一節中主要向大家演示如何使用CSS網格和漸變這樣的屬性構建一個簡單的計算器UI，其中網格主要用來實現計算器的佈局，然後使用漸變來構建計算器每個按鍵的效果。在開始閱讀下面的內容之前，你最好對網格和漸變有一定的瞭解，因為我們在接下來的內容並不會花時間來闡述網格和漸變。只會藉助這兩個CSS屬性來幫助大家構建計算器UI。

注意，整個製作計算器用到的例項，都將在CodePen上完成。

上圖是Mac電腦上的一個計算器，我們來做一個類似的，只不過功能可能會更為簡單一點。而我們要實現的計算器UI像下面這樣：

HTML結構

整個計算器我們分為三個部分，左上角控制視窗的按鈕 calculator-bar 、計算器計算值顯示區域 calculator-display 和計算器按鍵 calculator-keys ：

首先我們需要一個實現計算器的HTML結構:

<div class="calculator">
<div class="calculator-bar">
<div class="close"></div>
<div class="minimize"></div>
<div class="maximize"></div>
</div>

<div class="calculator-display"></div>

<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>

<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>

<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>

<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>

<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>