JavaScript实现简单计算器小程序

下面是详细讲解 "JavaScript实现简单计算器小程序" 的完整攻略：

介绍

计算器小程序是一种非常常见的小型应用程序，它可以用来进行简单的算术计算。使用 JavaScript 编写一个计算器小程序的过程，可以通过不同的方法来完成，但本次教程讲解的是最基本的方法，以便初学者学习。

步骤

以下是一个基本的步骤来创建 JavaScript 计算器小程序：

步骤 1：HTML 和 CSS

先在 HTML 中创建一个简单的输入框和按钮，它们将用于接收要进行计算的值和执行计算操作。同时，使用 CSS 为其添加一些样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="calculator">
    <div class="result">
      <input type="text" id="answer" placeholder="0">
    </div>
    <div class="buttons">
      <button onclick="clearInput()">C</button>
      <button onclick="input('%')">%</button>
      <button onclick="input('/')">/</button>
      <button onclick="input('*')">x</button>
      <button onclick="input('7')">7</button>
      <button onclick="input('8')">8</button>
      <button onclick="input('9')">9</button>
      <button onclick="input('-')">-</button>
      <button onclick="input('4')">4</button>
      <button onclick="input('5')">5</button>
      <button onclick="input('6')">6</button>
      <button onclick="input('+')">+</button>
      <button onclick="input('1')">1</button>
      <button onclick="input('2')">2</button>
      <button onclick="input('3')">3</button>
      <button onclick="equal()">=</button>
      <button onclick="input('0')">0</button>
      <button onclick="input('.')">.</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

#calculator {
  width: 240px;
  margin: 0 auto;
  text-align: center;
}

.result {
  margin-bottom: 10px;
}

input {
  width: 100%;
  height: 40px;
  font-size: 20px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

button {
  width: 100%;
  height: 40px;
  font-size: 20px;
  background-color: #eee;
}

步骤 2：JavaScript 代码

创建 JavaScript 文件，并将其连接到 HTML 文件中，然后在 JavaScript 文件中添加以下代码：

var answer = document.getElementById("answer");

function input(val) {
  answer.value += val;
}

function equal() {
  var exp = answer.value;
  if (exp) {
    answer.value = eval(exp);
  }
}

function clearInput() {
  answer.value = "";
}

在这里，我们首先通过 document.getElementById() 来获取输入框，并使用 value 属性来更新这个输入框的值。然后我们在 input() 函数中调用了 input() 方法，并将其参数传递给 answer 输入框，以便将点击的按钮添加到输入框中。

接下来我们在 equal() 函数中，使用 eval() 函数，来计算用户在输入框中输入的表达式，并将计算结果显示在输入框上。

最后，我们在 clearInput() 函数中，简单地使用 answer.value = ""; 来清除输入框中的所有内容。

步骤 3：测试计算器

现在，打开 HTML 文件，并测试计算器。可以通过点击按钮，将数字、小数点、操作符以及百分号输入到输入框中，然后点击等号按钮，计算器会自动计算表达式并在输入框上显示计算结果。

以下是一个关于该计算器的示例使用：

1. 8 + 9 = 17
2. 17 / 3 = 5.666666666666667
3. 34 * 11 = 374

另一个示例

以下是一个稍微复杂一些的示例，它可以根据下拉选择列表进行计算。

步骤 1：HTML 和 CSS

通过下面的 HTML 代码创造对应的下拉菜单和按钮：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Calculator</h1>
    <label for="number1">Number 1:</label>
    <input type="number" id="number1">
    <br>
    <label for="operation">Operation:</label>
    <select id="operation">
      <option value="add">+</option>
      <option value="subtract">-</option>
      <option value="multiply">x</option>
      <option value="divide">/</option>
    </select>
    <br>
    <label for="number2">Number 2:</label>
    <input type="number" id="number2">
    <br>
    <button onclick="calculate()">Calculate</button>
    <br>
    <div id="result"></div>
    <script src="script.js"></script>
  </body>
</html>

以下是等价于 HTML 的 CSS 代码：

label {
  display: inline-block;
  width: 100px;
}

input[type=number] {
  width: 200px;
}

select {
  width: 200px;
  margin-bottom: 10px;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
}

#result {
  margin-top: 20px;
  font-size: 24px;
}

步骤 2：JavaScript 代码

在 JavaScript 文件中，添加以下代码：

function calculate() {
  var number1 = document.getElementById("number1").value;
  var number2 = document.getElementById("number2").value;
  var operator = document.getElementById("operation").value;
  var result = "";

  if (operator === "add") {
    result = Number(number1) + Number(number2);
  } else if (operator === "subtract") {
    result = Number(number1) - Number(number2);
  } else if (operator === "multiply") {
    result = Number(number1) * Number(number2);
  } else if (operator === "divide") {
    result = Number(number1) / Number(number2);
  }

  document.getElementById("result").innerHTML = result;
}

在 calculate() 函数中，首先获取了用户选择的数字、操作符，并通过 if-else 语句来执行所选操作。最后，将计算结果赋值给变量 result，并将结果输出到 result 的 div 元素上。

步骤 3：测试计算器

现在，打开 HTML 文件，并测试计算器。可以通过输入两个数字并从下拉菜单中选择一个操作符，然后点击“Calculate" 按钮，计算器会自动计算表达式并显示计算结果。

结论

在本文中讲解了两种实现 JavaScript 简单计算器的方法，分别是通过 HTML 和 CSS 创建一个 UI，并使用 JavaScript 来实现计算器的功能；以及更为复杂的方法，根据选择的操作符来计算数字。这些方法可以帮助初学者了解 JavaScript 中的一些基本概念，同时也可以作为实现更多高级 JavaScript 小程序的基础。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现简单计算器小程序 - Python技术站