计算器的界面如下：

实现过程：

1. 通过html和css编写这样一个界面
2. JavaScript实现功能

在通过JavaScript实现计算器功能的过程中，其实使用的都是一些基本指数。主要包括以下几点：

1. If/else 分支.
2. For 循环
3. JavaScript 函数
4. 箭头函数
5. && 和 || 操作符
6. 如何使用textContent属性修改文本
7. 如何使用事件代理模式添加事件

实现过程其实主要关注的是一些细节问题，例如：

• 通过事件代理监听按键：

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.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const 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 keys
    Array.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
  }

这个简单的功能就完成啦！