js calc计算器|极客笔记

js calc计算器

1. 前言

计算器是一个常见的工具，不仅在日常生活中有很多应用，而且在编程中也起到了重要的作用。在前端开发中，使用JavaScript编写一个计算器是一个很好的练习，可以帮助我们理解JavaScript的基本语法和DOM操作。

本文将详细介绍如何使用JavaScript编写一个简单的计算器，并演示一些常见的计算功能。

2. HTML结构

首先，我们需要创建一个基本的HTML结构，用于显示计算器的界面。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>JS计算器</title>
  <style>
    /* 添加一些基本的样式 */
  </style>
</head>
<body>
  <div id="calculator">
    <input type="text" id="result" readonly>
    <table>
      <tr>
        <td><button onclick="buttonClick(7)">7</button></td>
        <td><button onclick="buttonClick(8)">8</button></td>
        <td><button onclick="buttonClick(9)">9</button></td>
        <td><button onclick="buttonClick('/')">/</button></td>
      </tr>
      <!-- 其他按钮省略 -->
    </table>
    <button onclick="calculateResult()">计算</button>
  </div>

  <script src="calculator.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个包含输入框、按钮和表格的div元素。输入框用于显示计算结果，按钮用于输入数字和运算符，表格用于布局按钮。每个按钮上的onclick属性绑定了一个JavaScript函数，用于处理按钮点击事件。

3. JavaScript代码

接下来，我们将编写JavaScript代码，处理计算器的逻辑。我们将逐步实现以下功能：

按钮点击事件处理
计算结果函数

首先，我们需要定义一个全局变量currentExpression，用于保存当前的计算表达式。我们将通过按钮点击事件改变这个表达式，并在计算结果时进行计算。

let currentExpression = '';

3.1 按钮点击事件处理

我们将通过buttonClick函数处理按钮点击事件。这个函数接收一个参数value，表示按钮的值。首先，我们需要判断按钮的值是数字还是运算符，然后将这个值添加到currentExpression中。

function buttonClick(value) {
  if (typeof value === 'number') {
    // 数字按钮
    currentExpression += value;
  } else {
    // 运算符按钮
    currentExpression += ' ' + value + ' ';
  }
}

3.2 计算结果函数

我们将通过calculateResult函数计算表达式的结果，并将结果显示在输入框中。首先，我们将使用JavaScript的eval函数来计算表达式的结果。

function calculateResult() {
  let result = eval(currentExpression);
  document.getElementById('result').value = result;
  currentExpression = '';
}

上述代码中，eval函数用于计算表达式的结果，并将结果保存在result变量中。然后，我们通过document.getElementById函数获取输入框的元素，并将结果赋值给它。最后，我们将currentExpression重置为空字符串，以便下一次计算。

4. 测试

现在，我们已经完成了计算器的编写。在浏览器中打开HTML文件，点击按钮进行测试。

例如，我们可以按照以下步骤进行测试：

点击数字按钮7，输入框显示7。
点击运算符按钮+，输入框显示7 +。
点击数字按钮5，输入框显示7 + 5。
点击运算符按钮=，输入框显示12。

5. 结论

通过本文的介绍，我们学习了如何使用JavaScript编写一个简单的计算器。我们了解了如何处理按钮点击事件，并通过eval函数计算表达式的结果。这个计算器只是一个简单的示例，你可以根据自己的需求进行扩展和改进。

js calc计算器