Javascript 计算器：让计算轻松有趣

2023-05-26 21:27:48

用 JavaScript 构建计算器：踏上数字世界的征途

在现代快节奏的数字化时代，计算已成为不可或缺的一部分，从日常计算到复杂的数学作业，一个简洁易用的计算器总是派得上用场。 JavaScript 作为一门强大且通用的编程语言，提供了轻松构建计算器的便利性。本博客将循序渐进地指导您用 JavaScript 编写一个简单的计算器，让您掌握数字世界的奥秘。

搭建基础：HTML 结构

旅程的第一步是创建 HTML 文件，它是计算器结构的基础：

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

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

这段代码创建了一个包含计算器元素的 div，以及一个用于显示计算结果的输入元素。此外，它还包含用于输入数字和运算符的按钮，以及一个清除按钮和一个等于按钮。

样式篇：CSS 的美学魔法

为了给计算器注入视觉吸引力，我们需要一些 CSS 魔力：

body {
  font-family: Arial, sans-serif;
}

#calculator {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
  border-radius: 5px;
}

#display {
  width: 280px;
  height: 50px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

.operator {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

.number {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

.decimal {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

.equal {
  width: 110px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

.clear {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

有了这段代码，您的计算器将焕然一新，拥有整洁的边框、大小适中的按钮以及清晰易读的显示屏。

JavaScript 的核心：计算器的大脑

现在，重头戏来了，JavaScript 代码是计算器的大脑：

function cal(obj) {
  var display = document.getElementById("display");

  if (obj.className == "number") {
    display.value += obj.innerHTML;
  } else if (obj.className == "operator") {
    display.value += obj.innerHTML;
  } else if (obj.className == "decimal") {
    if (display.value.indexOf(".") == -1) {
      display.value += obj.innerHTML;
    }
  } else if (obj.className == "equal") {
    display.value = eval(display.value);
  } else if (obj.className == "clear") {
    display.value = "";
  }
}

function clear() {
  var display = document.getElementById("display");
  display.value = "";
}