JavaScript实现一个简易的计算器实例代码

下面我来为你详细讲解JavaScript实现一个简易的计算器的完整攻略，主要分为以下几步：

1. HTML结构搭建

首先，我们需要在HTML中创建相关的元素，可以通过表格的形式来实现。具体的代码如下：

<table>
  <tr>
    <td colspan="4"><input type="text" id="result" disabled /></td>
  </tr>
  <tr>
    <td><button onclick="addToResult('7')">7</button></td>
    <td><button onclick="addToResult('8')">8</button></td>
    <td><button onclick="addToResult('9')">9</button></td>
    <td><button onclick="addToResult('/')">/</button></td>
  </tr>
  <tr>
    <td><button onclick="addToResult('4')">4</button></td>
    <td><button onclick="addToResult('5')">5</button></td>
    <td><button onclick="addToResult('6')">6</button></td>
    <td><button onclick="addToResult('*')">*</button></td>
  </tr>
  <tr>
    <td><button onclick="addToResult('1')">1</button></td>
    <td><button onclick="addToResult('2')">2</button></td>
    <td><button onclick="addToResult('3')">3</button></td>
    <td><button onclick="addToResult('-')">-</button></td>
  </tr>
  <tr>
    <td><button onclick="addToResult('0')">0</button></td>
    <td><button onclick="addToResult('.')">.</button></td>
    <td><button onclick="clearResult()">C</button></td>
    <td><button onclick="addToResult('+')">+</button></td>
  </tr>
  <tr>
    <td colspan="4"><button onclick="calculate()">=</button></td>
  </tr>
</table>

其中，我们用一个id为“result”的输入框来显示计算结果，用button元素来实现计算器的按钮等选项。

1. JS功能实现

接下来，我们需要通过JavaScript来实现计算器的各种功能，具体包括：

• 添加数字和符号到输入框
• 清除输入框
• 计算输入框中的表达式

首先，我们需要写一个函数来将数字和符号添加到输入框中，具体的代码如下：

function addToResult(value) {
  var result = document.getElementById('result');
  result.value += value;
}

在这个函数中，首先通过getElementById方法获取到id为“result”的输入框元素，然后将输入框的value值与传入的value参数值进行拼接，最终将新的结果赋值给输入框的value属性，从而实现添加数字和符号的功能。

接着，我们需要写一个函数来清除输入框，具体的代码如下：

function clearResult() {
  var result = document.getElementById('result');
  result.value = '';
}

这个函数非常简单，只需要将输入框的value属性值设置为空即可。

最后，我们需要写一个函数来计算输入框中的表达式，具体的代码如下：

function calculate() {
  var result = document.getElementById('result');
  var expression = result.value;

  if (expression.indexOf('*') != -1) {
    expression = expression.replace('*', '/');
  }

  var answer = eval(expression);
  result.value = answer;
}

在这个函数中，首先获取到输入框的value属性值，并将其作为参数传入到eval()函数中，从而得到计算结果。由于JavaScript中eval函数可以直接计算字符串中的表达式，因此我们只需要将字符串中的“*”符号替换为“/”，再将表达式传入到eval函数中即可。

最后，我们将计算结果赋值给输入框的value属性，从而实现计算表达式的功能。

示例说明：

示例1：用户输入“2+3*4”，计算结果应为14。

示例2：用户输入“5-2/2”，计算结果应为4。