js实现简单计算器

讲解如下：

JS实现简单计算器的完整攻略

1. HTML结构

首先，我们需要在HTML中创建一个表单，用于接收用户输入的数据。HTML代码如下：

<form>
  <input type="text" id="num1"> + 
  <input type="text" id="num2"> 
  <button onclick="add()"> = </button>
  <input type="text" id="result">
</form>

上面的代码中，我们创建了两个文本框，分别用于接收用户输入的两个数字。接着，我们创建了一个按钮，当用户点击按钮时，会触发add()函数，该函数将两个数字进行相加，并将结果显示在另一个文本框中。

2. JavaScript实现

接下来，我们需要在JavaScript中编写add()函数，该函数将接收用户输入的两个数字，并进行相加。JavaScript代码如下：

function add() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var result = num1 + num2;
  document.getElementById("result").value = result;
}

上面的代码中，我们首先使用document.getElementById()方法获取文本框中的值，并将其转换为整数类型。接着，我们将两个数相加，并将结果赋值给另一个文本框。

3. 示例说明

下面给出两个示例，分别演示如何在不同的页面中创建简单计算器。

示例一

在网页中插入以下HTML代码：

<form>
  <input type="text" id="num1"> - 
  <input type="text" id="num2"> 
  <button onclick="subtract()"> = </button>
  <input type="text" id="result">
</form>

在JavaScript中实现subtract()函数，代码如下：

function subtract() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var result = num1 - num2;
  document.getElementById("result").value = result;
}

上面的代码中，我们创建了一个能够实现两个数相减的计算器，用户输入两个数后点击“-”按钮即可得到相减的结果。

示例二

在网页中插入以下HTML代码：

<form>
  <input type="text" id="num1"> * 
  <input type="text" id="num2"> 
  <button onclick="multiply()"> = </button>
  <input type="text" id="result">
</form>

在JavaScript中实现multiply()函数，代码如下：

function multiply() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var result = num1 * num2;
  document.getElementById("result").value = result;
}

上面的代码中，我们创建了一个能够实现两个数相乘的计算器，用户输入两个数后点击“*”按钮即可得到相乘的结果。

总结

以上就是JS实现简单计算器的完整攻略，通过上述的步骤，我们可以轻松地创建自己的简单计算器，并对不同的运算进行扩展。