返回

用原生JavaScript制作简易计算器

前端

如何用原生 JavaScript 构建一个简易计算器

介绍

对于初学者来说，JavaScript 是一款绝佳的编程语言，因为它易于学习且用途广泛。本教程将指导您完成使用原生 JavaScript 在前端构建一个简易计算器的过程。我们将从 HTML 结构开始，然后添加 CSS 样式来美化计算器的外观。最后，我们将用 JavaScript 实现计算器的逻辑，使它能够执行基本算术运算。

HTML 结构

HTML（超文本标记语言）用于定义网页的内容和结构。以下是计算器的 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="calculator">
    <input type="text" id="display">
    <div class="buttons">
      <button class="operator" value="+">+</button>
      <button class="operator" value="-">-</button>
      <button class="operator" value="*">*</button>
      <button class="operator" value="/">/</button>
      <button class="digit" value="7">7</button>
      <button class="digit" value="8">8</button>
      <button class="digit" value="9">9</button>
      <button class="digit" value="4">4</button>
      <button class="digit" value="5">5</button>
      <button class="digit" value="6">6</button>
      <button class="digit" value="1">1</button>
      <button class="digit" value="2">2</button>
      <button class="digit" value="3">3</button>
      <button class="digit" value="0">0</button>
      <button class="decimal" value=".">.</button>
      <button class="equal" value="=">=</button>
      <button class="clear" value="C">C</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS 样式

CSS（层叠样式表）用于定义网页的外观和布局。以下是计算器的 CSS 样式：

#calculator {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

#display {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 20px;
  text-align: right;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.button {
  width: 25%;
  height: 50px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
}

.operator {
  background-color: #ccc;
}

.equal {
  width: 100%;
  background-color: #000;
  color: #fff;
}

.clear {
  background-color: #f00;
  color: #fff;
}

JavaScript 逻辑

JavaScript 是一种高级编程语言，用于为网页添加交互性和动态性。以下是计算器的 JavaScript 逻辑：

const display = document.getElementById('display');
const buttons = document.querySelectorAll('.button');

let firstOperand = null;
let secondOperand = null;
let operator = null;

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const value = button.value;

    switch (value) {
      case '+':
      case '-':
      case '*':
      case '/':
        operator = value;
        firstOperand = display.value;
        display.value = '';
        break;
      case '.':
        if (!display.value.includes('.')) {
          display.value += value;
        }
        break;
      case 'C':
        display.value = '';
        firstOperand = null;
        secondOperand = null;
        operator = null;
        break;
      case '=':
        if (firstOperand !== null && operator !== null) {
          secondOperand = display.value;
          const result = calculate(firstOperand, operator, secondOperand);
          display.value = result;
          firstOperand = null;
          secondOperand = null;
          operator = null;
        }
        break;
      default:
        display.value += value;
        break;
    }
  });
});

function calculate(a, operator, b) {
  a = parseFloat(a);
  b = parseFloat(b);

  switch (operator) {
    case '+':
      return a + b;
    case '-':
      return a - b;
    case '*':
      return a * b;
    case '/':
      return a / b;
  }

  return null;
}

运行计算器

  1. 将 HTML、CSS 和 JavaScript 文件保存在本地计算机上。
  2. 使用浏览器打开 HTML 文件。
  3. 计算器将出现在浏览器窗口中，您可以输入数字和运算符进行计算。

总结

恭喜！您已经成功使用原生 JavaScript 构建了一个简易计算器。通过本教程，您了解了 HTML、CSS 和 JavaScript 的基础知识，以及如何将它们结合起来创建交互式网页。您可以根据自己的需要对计算器进行扩展和修改，使其具有更多功能，例如存储历史记录或处理更复杂的数学表达式。

常见问题解答

1. 如何使用计算器？
使用计算器，只需输入数字和运算符，然后单击“=”按钮即可。

2. 我可以在计算器中输入负数吗？
是的，您可以在计算器中输入负数。只需在数字前面添加减号 (-) 即可。

3. 我可以输入小数吗？
是的，您可以输入小数。只需在数字中添加小数点 (.) 即可。

4. 如何清除计算器？
要清除计算器，只需单击“C”按钮即可。

5. 我可以扩展计算器吗？
是的，您可以根据自己的需要对计算器进行扩展。例如，您可以添加存储历史记录或处理更复杂数学表达式的功能。