直接证明计算器 - Javascript (1)

📌 相关文章

📜 直接证明计算器 - Javascript (1)

📅 最后修改于: 2023-12-03 15:27:16.479000 🧑 作者: Mango

直接证明计算器 - Javascript

计算器是一个非常实用的工具，可以用来进行各种数学运算。本文将介绍如何使用Javascript创建一个简单的计算器。

准备工作

为了创建一个计算器，我们需要使用HTML和Javascript。以下是一个简单的HTML模板，用于创建一个基本的计算器界面：

<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
  </head>
  <body>
    <table>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>+</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>*</button></td>
      </tr>
      <tr>
        <td><button>0</button></td>
        <td><button>.</button></td>
        <td><button>=</button></td>
        <td><button>/</button></td>
      </tr>
    </table>
    <input type="text" id="output" readonly="true"/>
    <script src="script.js"></script>
  </body>
</html>

我们创建了一个表格，并在表格中插入了按钮，用于输入数字和运算符。在表格下方，我们使用一个文本框来显示计算结果。我们还在文件底部添加了一个Javascript文件，用于实现计算器的逻辑。

实现逻辑

为了实现计算器的逻辑，我们需要编写Javascript代码。以下是一个简单的实现，它可以处理基本的加、减、乘、除运算：

// 获取所有数字按钮
var numberButtons = document.querySelectorAll("button:not(:last-child)");

// 获取所有运算符按钮
var operatorButtons = document.querySelectorAll("button:nth-child(4n)");

// 获取输出文本框
var outputBox = document.getElementById("output");

// 当前操作数
var currentNumber = "";

// 上一个操作数
var lastNumber = "";

// 当前运算符
var currentOperator = "";

// 处理数字按钮点击事件
for (var i = 0; i < numberButtons.length; i++) {
  numberButtons[i].addEventListener("click", function() {
    currentNumber += this.textContent;
    outputBox.value = currentNumber;
  });
}

// 处理运算符按钮点击事件
for (var i = 0; i < operatorButtons.length; i++) {
  operatorButtons[i].addEventListener("click", function() {
    if (lastNumber === "") {
      lastNumber = currentNumber;
    } else {
      calculate();
    }
    currentOperator = this.textContent;
    currentNumber = "";
  });
}

// 处理等于号点击事件
document.querySelector("button:last-child").addEventListener("click", function() {
  calculate();
});

// 计算结果
function calculate() {
  var result;
  switch (currentOperator) {
    case "+":
      result = parseFloat(lastNumber) + parseFloat(currentNumber);
      break;
    case "-":
      result = parseFloat(lastNumber) - parseFloat(currentNumber);
      break;
    case "*":
      result = parseFloat(lastNumber) * parseFloat(currentNumber);
      break;
    case "/":
      result = parseFloat(lastNumber) / parseFloat(currentNumber);
      break;
  }
  outputBox.value = result;
  lastNumber = result.toString();
}

在这段代码中，我们首先获取所有数字按钮和运算符按钮。然后，我们处理数字按钮的点击事件，用于将数字添加到当前操作数中。我们还处理运算符按钮的点击事件，用于计算上一个操作数和当前操作数之间的结果，并将结果存储在上一个操作数中。最后，我们还处理等于号按钮的点击事件，用于计算整个表达式的结果。在计算过程中，我们使用switch语句处理不同的运算符。最后，我们还更新输出文本框，以显示最终结果。

总结

使用上述代码，我们可以创建一个简单的计算器，用于执行基本的加、减、乘、除运算。当然，这只是一个基础的模板，你可以添加其他功能，如计算平方根、计算百分比等等，以创建一个更为完善的计算器。