用JS写的简单的计算器实现代码

2023年5月28日下午6:31 • JavaScript

下面是用JS写的简单的计算器实现的完整攻略，包含两条示例说明。

标题

用JS写的简单的计算器实现代码

环境准备

在开始实现计算器之前，需要准备好以下环境：

浏览器：比如Chrome、Firefox等主流浏览器。
HTML文件：用于显示计算器界面和加载JS文件。
JS文件：用于编写实际的计算器代码。

计算器的HTML界面

首先，需要编写计算器的HTML界面。下面是一个简单的计算器界面示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>计算器</title>
  </head>
  <body>
    <h1>计算器</h1>
    <form>
      <input type="text" id="result" disabled>
      <br>
      <input type="button" value="1" onclick="addNumber(1)">
      <input type="button" value="2" onclick="addNumber(2)">
      <input type="button" value="3" onclick="addNumber(3)">
      <input type="button" value="+" onclick="addOperator('+')">
      <br>
      <input type="button" value="4" onclick="addNumber(4)">
      <input type="button" value="5" onclick="addNumber(5)">
      <input type="button" value="6" onclick="addNumber(6)">
      <input type="button" value="-" onclick="addOperator('-')">
      <br>
      <input type="button" value="7" onclick="addNumber(7)">
      <input type="button" value="8" onclick="addNumber(8)">
      <input type="button" value="9" onclick="addNumber(9)">
      <input type="button" value="*" onclick="addOperator('*')">
      <br>
      <input type="button" value="C" onclick="clearResult()">
      <input type="button" value="0" onclick="addNumber(0)">
      <input type="button" value="=" onclick="calculate()">
      <input type="button" value="/" onclick="addOperator('/')">
    </form>
    <script src="calculator.js"></script>
  </body>
</html>

这个HTML界面包含了一个<input>元素和四个运算符按钮。当用户单击运算符按钮时，需要将其添加到<input>元素中，然后再进行计算。

计算器的JS代码

接下来需要编写JS代码来实现计算器的基本功能。下面是一个简单的计算器JS代码示例：

// 保存计算器中的数值和运算符
var currentNumber = '';
var currentOperator = '';

// 将数字添加到输入框中
function addNumber(value) {
  currentNumber += value;
  document.getElementById('result').value = currentNumber;
}

// 将运算符添加到输入框中
function addOperator(operator) {
  // 如果还没有输入数字，则不执行任何操作
  if (currentNumber === '') {
    return;
  }

  // 如果已经输入过数字且当前没有运算符，则保存运算符
  if (currentOperator === '') {
    currentOperator = operator;
    currentNumber += currentOperator;
    document.getElementById('result').value = currentNumber;
    return;
  }

  // 如果已经输入过数字且当前已经有运算符，则进行计算并保存新的运算符
  calculate();
  currentOperator = operator;
  currentNumber += currentOperator;
  document.getElementById('result').value = currentNumber;
}

// 清除输入框中的内容
function clearResult() {
  currentNumber = '';
  currentOperator = '';
  document.getElementById('result').value = '';
}

// 计算结果并在输入框中显示
function calculate() {
  // 如果当前没有运算符，则不执行任何操作
  if (currentOperator === '') {
    return;
  }

  // 获取输入框中的数字和运算符
  var numbers = currentNumber.split(currentOperator);
  var num1 = parseFloat(numbers[0]);
  var num2 = parseFloat(numbers[1]);

  // 根据运算符计算结果
  var result = '';
  switch (currentOperator) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      result = num1 / num2;
      break;
  }

  // 将结果显示在输入框中
  clearResult();
  document.getElementById('result').value = result;
  currentNumber = result.toString();
}

这个JS代码包含了四个函数addNumber、addOperator、clearResult和calculate，分别用于将数字和运算符添加到输入框中，清除输入框中的内容，以及计算结果。同时，这个JS代码也包含了两个全局变量currentNumber和currentOperator，用于保存当前输入框中的数值和运算符。