計算器的界面如下：
實現過程：
- 通過html和css編寫這樣一個界面
- JavaScript實現功能
在通過JavaScript實現計算器功能的過程中，其實使用的都是一些基本指數。主要包括以下幾點：
- If/else 分支.
- For 循環
- JavaScript 函數
- 箭頭函數
- && 和 || 操作符
- 如何使用textContent屬性修改文本
- 如何使用事件代理模式添加事件
實現過程其實主要關注的是一些細節問題，例如：
- 通過事件代理監聽按鍵：
const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)keys.addEventListener(‘click’, e => {if (e.target.matches(‘button’)) {// Do something}
})
- 通過data-action確定點擊按鍵的類型
const key = e.target
const action = key.dataset.action
data-action是通過這樣的方式賦值的：
如果沒有data-action，則代表是數字。
- 考慮在一個計算器中可能會被按的鍵類型：數字鍵（0-9）、操作鍵 （+，-，×，÷）、小數點鍵、等號鍵、清除鍵。在這個過程中，最主要就是要獲取到被按到的鍵和當前應該顯示的數值，我們可以通過textContent和點擊按鍵的.calculator__display分別獲取到這兩個值。
const display = document.querySelector('.calculator__display')keys.addEventListener('click', e => {if (e.target.matches('button')) {const key = e.targetconst action = key.dataset.actionconst keyContent = key.textContentconst displayedNum = display.textContent// ...}
})- 當操作者按小數點時，我們需要將.添加到已經顯示的數字后面。
if (action === 'decimal') {display.textContent = displayedNum + '.'
}
- 當操作者按操作符時，我們給操作符按鈕添加一個名字叫is-depressed的類名。
if (action === 'add' || action === 'subtract' || action === 'multiply' || action === 'divide') {key.classList.add('is-depressed')
}
- 當操作者再次點擊了數字鍵，之前顯示的數字應該被替換成新的數組。操作鍵也應該被解除“被點擊”的狀態。我們可以使用forEach循環遍歷所有的按鍵，去移除is-depressed類
keys.addEventListener('click', e => {if (e.target.matches('button')) {const key = e.target// ...// Remove .is-depressed class from all keysArray.from(key.parentNode.children).forEach(k => k.classList.remove('is-depressed'))}
})
- 當操作者點擊等號鍵，計算器應該根據三個值：第一個輸入計算器中的數字、操作符、第二個輸入計算器中的數字，計算一個結果。在計算之后，結果會替換當前已顯示的值出現在屏幕上。
const calculate = (n1, operator, n2) => {let result = ''if (operator === 'add') {result = n1 + n2} else if (operator === 'subtract') {result = n1 - n2} else if (operator === 'multiply') {result = n1 * n2} else if (operator === 'divide') {result = n1 / n2}這個簡單的功能就完成啦！
