在前端开发中，经常需要实现一些简单的计算器功能来方便用户进行数值计算。本文将介绍如何使用 JavaScript 实现一个简单的计算器，包括基本的四则运算功能和清除、退格等操作。
HTML 结构
首先，我们需要在 HTML 中定义计算器的基本结构，包括输入框和按钮。以下是一个简单的示例：
-- -------------------- ---- -------
---- -------------------
------ ----------- ----------- ---------
---- ----------------
------- -------------- --------------------
------- -------------- --------------------
------- -------------- --------------------
------- ---------------- --------------------
------- -------------- --------------------
------- -------------- --------------------
------- -------------- --------------------
------- ---------------- --------------------
------- -------------- --------------------
------- -------------- --------------------
------- -------------- --------------------
------- ---------------- --------------------
------- -------------- --------------------
------- ---------------- --------------------
------- ---------------------
------- ------------------------------
------- ---------------------
------
------其中，输入框的 ID 为 result，class 为 calculator 和 buttons 的元素用于样式控制。按钮分为数字按钮和操作符按钮，数字按钮的 class 为 number，操作符按钮的 class 为 operator。此外，还有三个特殊按钮：清除按钮（ID 为 clear）、退格按钮（ID 为 backspace）和等号按钮（ID 为 equal）。
JavaScript 实现
接下来，我们将使用 JavaScript 实现计算器的基本功能。首先，定义一个变量 expression 用于保存用户输入的表达式，以及一个变量 resultEl 用于获取输入框元素：
let expression = '';
const resultEl = document.getElementById('result');然后，我们需要为每个按钮添加点击事件，当用户点击按钮时，将按钮的值添加到表达式中。点击数字按钮时，直接添加数字；点击操作符按钮时，需要先添加空格再添加操作符。以下是实现代码：
-- -------------------- ---- -------
----- ------- - ----------------------------------- ---------
---------------------- -- -
-------------------------------- -- -- -
----- - ----- - - -------
-- ------ --- ---- -
-- ----------
----- ------ - -----------------
-------------- - -------
---------- - ------------------
- ---- -- ------ --- ---- -
-- ---------
---------- - ---
-------------- - ---
- ---- -- ------ --- --------- -
-- ----
---------- - ------------------- ----
-------------- - -----------
- ---- -- ------ --- --- -- ----- --- --- -- ----- --- --- -- ----- --- ---- -
-- -----
---------- -- - -------- --
-------------- - -----------
- ---- -
-- ----
---------- -- ------
-------------- - -----------
-
---
---在上述代码中，我们首先使用 querySelectorAll 方法获取所有按钮，并依次添加点击事件。当用户点击等号按钮时，使用 eval 函数计算表达式的值并将结果显示在输入框中；当用户点击清空按钮时，清空表达式和输入框；当用户点击退格按钮时，删除最后一位字符；当用户点击操作符时，先在表达式中添加一个空格再添加操作符；当用户点击数字时，直接添加数字
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1182