实现了一个简易的计算器

计算器的界面如下：

在这里插入图片描述
实现过程：

通过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}