使用 JavaScript 实现简单的计算器功能

在前端开发中，经常需要实现一些简单的计算器功能来方便用户进行数值计算。本文将介绍如何使用 JavaScript 实现一个简单的计算器，包括基本的四则运算功能和清除、退格等操作。

HTML 结构

首先，我们需要在 HTML 中定义计算器的基本结构，包括输入框和按钮。以下是一个简单的示例：

---- -------------------
  ------ ----------- ----------- ---------
  ---- ----------------
    ------- -------------- --------------------
    ------- -------------- --------------------
    ------- -------------- --------------------
    ------- ---------------- --------------------
    ------- -------------- --------------------
    ------- -------------- --------------------
    ------- -------------- --------------------
    ------- ---------------- --------------------
    ------- -------------- --------------------
    ------- -------------- --------------------
    ------- -------------- --------------------
    ------- ---------------- --------------------
    ------- -------------- --------------------
    ------- ---------------- --------------------
    ------- ---------------------
    ------- ------------------------------
    ------- ---------------------
  ------
------

其中，输入框的 ID 为 result，class 为 calculator 和 buttons 的元素用于样式控制。按钮分为数字按钮和操作符按钮，数字按钮的 class 为 number，操作符按钮的 class 为 operator。此外，还有三个特殊按钮：清除按钮（ID 为 clear）、退格按钮（ID 为 backspace）和等号按钮（ID 为 equal）。

JavaScript 实现

接下来，我们将使用 JavaScript 实现计算器的基本功能。首先，定义一个变量 expression 用于保存用户输入的表达式，以及一个变量 resultEl 用于获取输入框元素：

--- ---------- - ---
----- -------- - ----------------------------------

然后，我们需要为每个按钮添加点击事件，当用户点击按钮时，将按钮的值添加到表达式中。点击数字按钮时，直接添加数字；点击操作符按钮时，需要先添加空格再添加操作符。以下是实现代码：

----- ------- - ----------------------------------- ---------

---------------------- -- -
  -------------------------------- -- -- -
    ----- - ----- - - -------

    -- ------ --- ---- -
      -- ----------
      ----- ------ - -----------------
      -------------- - -------
      ---------- - ------------------
    - ---- -- ------ --- ---- -
      -- ---------
      ---------- - ---
      -------------- - ---
    - ---- -- ------ --- --------- -
      -- ----
      ---------- - ------------------- ----
      -------------- - -----------
    - ---- -- ------ --- --- -- ----- --- --- -- ----- --- --- -- ----- --- ---- -
      -- -----
      ---------- -- - -------- --
      -------------- - -----------
    - ---- -
      -- ----
      ---------- -- ------
      -------------- - -----------
    -
  ---
---

在上述代码中，我们首先使用 querySelectorAll 方法获取所有按钮，并依次添加点击事件。当用户点击等号按钮时，使用 eval 函数计算表达式的值并将结果显示在输入框中；当用户点击清空按钮时，清空表达式和输入框；当用户点击退格按钮时，删除最后一位字符；当用户点击操作符时，先在表达式中添加一个空格再添加操作符；当用户点击数字时，直接添加数字

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/1182

js实现简单的计算器功能

使用 JavaScript 实现简单的计算器功能

HTML 结构

JavaScript 实现