在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。

计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。

一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。

我们将在本文中使用 HTML、CSS 和 JavaScript 逐步创建一个简单的计算器。

简单的 JavaScript 计算器

让我们开始创建我们的简单计算器。我们将使用：

  1. HTML (index.html) - 创建计算器的结构
  2. CSS (style.css) - 设置计算器的样式
  3. JavaScript (script.js) - 创建计算器的逻辑

我们将逐步开始构建我们的计算器。首先，将创建计算器的结构（使用 HTML），然后我们将对其进行样式设置（使用 CSS），最后，我们将创建计算器的逻辑（使用 JavaScript）。

在继续之前，让我们看看我们将要构建什么。

测试应用程序

创建计算器的结构 - HTML

当您在 HTML 中创建任何东西的结构时，结构不必是完美的。您首先需要创建一个基本布局，然后根据您的需要对其进行修改。

首先创建一个容器元素（带有类容器的div 元素），然后在其中创建另一个带有类计算器的 div 元素。这个 div 元素将是我们的计算器容器。

<div class="container">
  <div class="calculator">
  </div>
</div>
HTML

现在，在计算器容器中，创建 2 个 div 元素，一个用于显示结果，另一个用于显示输入。

<div class="calculator">
  <div class="output">
  </div>
  <div class="input">
  </div>
</div>
HTML

输出元素将进一步包含 2 个前置元素。第一个称为上输出，显示表达式，第二个称为下输出，显示结果。

<div class="output">
  <pre class="upper"></pre>
  <pre class="lower">0</pre>
</div>
HTML

输入元素将包含我们可以拥有的各种输入按钮，例如数字、运算符、清除、括号等。此外，使用javascript 函数将 onclick 事件附加到所有这些按钮。

<div class="input">
  <button onclick="pressAllClear()">AC</button>
  <button onclick="pressNum(this)">0</button>
  <button onclick="pressClear()"><i class="fas fa-backspace"></i></button>
  <button onclick="pressOperator(this)">+</button>
  <button onclick="pressNum(this)">1</button>
  <button onclick="pressNum(this)">2</button>
  <button onclick="pressNum(this)">3</button>
  <button onclick="pressOperator(this)">-</button>
  <button onclick="pressNum(this)">4</button>
  <button onclick="pressNum(this)">5</button>
  <button onclick="pressNum(this)">6</button>
  <button onclick="pressOperator(this)">&times;</button>
  <button onclick="pressNum(this)">7</button>
  <button onclick="pressNum(this)">8</button>
  <button onclick="pressNum(this)">9</button>
  <button onclick="pressOperator(this)">&div;</button>
  <button onclick="pressDot()">.</button>
  <button onclick="pressBracket(this)">(</button>
  <button onclick="pressBracket(this)">)</button>
  <button onclick="pressEqual()">=</button>
</div>
HTML

在上面的代码中，您可以看到按钮按特定顺序排列，因为我们希望我们的按钮位于特定位置。通过不同的顺序，我们可以创建不同的计算器布局。

最后，将 CSS 和 Javascript 文件连接到 HTML 文件。此外，将字体很棒的图标添加到 HTML 文件中。

这是计算器的完整 HTML 代码。将其保存为index.html文件。

完整的 HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="./style.css">
  <title>Javascript Calculator</title>
</head>

<body>
  <div class="container">
    <div class="calculator">
      <div class="output">
        <pre id="upper"></pre>
        <pre id="lower">0</pre>
      </div>
      <div class="input">
        <button onclick="pressAllClear()">AC</button>
        <button onclick="pressNum(this)">0</button>
        <button onclick="pressClear()"><i class="fas fa-backspace"></i></button>
        <button onclick="pressOperator(this)">+</button>
        <button onclick="pressNum(this)">1</button>
        <button onclick="pressNum(this)">2</button>
        <button onclick="pressNum(this)">3</button>
        <button onclick="pressOperator(this)">-</button>
        <button onclick="pressNum(this)">4</button>
        <button onclick="pressNum(this)">5</button>
        <button onclick="pressNum(this)">6</button>
        <button onclick="pressOperator(this)">&times;</button>
        <button onclick="pressNum(this)">7</button>
        <button onclick="pressNum(this)">8</button>
        <button onclick="pressNum(this)">9</button>
        <button onclick="pressOperator(this)">&div;</button>
        <button onclick="pressDot()">.</button>
        <button onclick="pressBracket(this)">(</button>
        <button onclick="pressBracket(this)">)</button>
        <button onclick="pressEqual()">=</button>
      </div>
    </div>
  </div>

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

</html>
HTML

这是它的外观：

样式化计算器 - CSS

要设置计算器的样式，您需要创建 CSS 文件。在 CSS 文件中，使用CSS 选择器定位元素并向它们添加样式：

对于按钮方向，您可以使用flexbox。

这是计算器的完整 CSS 代码。将其保存为style.css文件。

完整的 CSS 代码

/* Calculator CSS */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

body {
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #4e4e4e;
}

.calculator {
  background: #dd6f6f;
  border-radius: 5px;
  padding: 5px;
  width: 300px;
  min-width: 300px;
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4), 
                    4px 4px 10px rgba(0, 0, 0, 0.7);
}

.output {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  background: #ffffff;
  min-height: 50px;
  padding: 5px;
  margin: 0 1px 10px;
  border-radius: 0.25rem;
  box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.output pre {
  text-align: right;
  font-size: 25px;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  width: 288px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.output pre::-webkit-scrollbar {
  display: none;
}

.output #upper {
  color: #424242;
  font-size: 18px;
}

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

.input button {
  width: calc(25% - 24px);
  height: 50px;
  margin: 8px 12px;
  border-radius: 50%;
  background-color: #c05d5d;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),
                    1px 1px 5px rgba(94, 31, 31, 0.7);
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  border: none;
}

.input button:hover {
  background-color: #b35555;
}

.input button:active {
  box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),
              inset -1px -1px 2px rgba(255, 255, 255, 0.3);
  color: #642929;
}
CSS

我们已经完成了计算器的设计。现在，我们需要创建 JavaScript 代码以使计算器工作。

Javascript计算器代码

现在让我们为计算器编写 JavaScript 代码。

一、选择要素

在 HTML 部分，您可以看到有 2 个输出元素。使用querySelector方法选择它们。

// Select the output elements
// upper output is for showing the expression
let outputUpper = document.querySelector('#upper');
// lower output is for showing the result
let outputLower = document.querySelector('#lower');
JavaScript

'outputLower'是显示用户给出的表达式和结果输出的地方。

'outputUpper'是用户给出的表达式将在结果上方以小尺寸显示的位置，以便用户可以同时看到他们的表达式和结果。

二、现在创建一个函数来输入数字。

// function to get number input
function pressNum(e) {
  if (outputLower.innerHTML === '0') {
    outputLower.innerHTML = e.innerHTML;
  } else {
    outputLower.innerHTML += e.innerHTML;
  }
}
JavaScript

当按下任意数字按钮时，将调用上述函数。它将检查 outputLower（表达式）是否为 0。如果它是 0，那么它将用按下的数字替换 0。如果不为 0，则将按下的数字添加到 outputLower。

该函数使用此关键字获取按下的数字。

三、现在创建函数来输入运算符。

// function to get operator input
function pressOperator(e) {
  // check last operator
  let lastOperator = outputLower.innerHTML.slice(-1);
  if (lastOperator === '+' || lastOperator === '-' || lastOperator === '×' || lastOperator === '÷') {
    output.innerHTML = outputLower.innerHTML.slice(0, -1) + e.innerHTML;
  } else {
    outputLower.innerHTML += e.innerHTML;
  }
}
JavaScript

当按下任何操作员按钮时，将调用上述函数。它将检查表达式中的最后一个运算符是否为 +、-、× 或 ÷。如果是 +、-、× 或 ÷，那么它将用按下的运算符替换最后一个运算符。如果不是 +、-、× 或 ÷，则将按下的运算符添加到 outputLower。

我们正在检查和替换最后一个运算符，因为如果有人多次按 + 运算符，它就会变成 ++ 或 +++，这不是一个有效的运算符。或者可能有大小写或 +*、+/+ 等。所以我们用新按下的运算符替换最后一个运算符。

四。现在创建函数来清除计算器。

我们有 2 个按钮来清除计算器。一个是清除按钮，另一个是清除所有按钮。

// function to clear the calculator
// clear all
function pressAllClear() {
  outputUpper.innerHTML = '';
  outputLower.innerHTML = '0';
}

// clear one
function pressClear() {
  outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);
}
JavaScript

要清除一个数字，我们将使用'outputLower.innerHTML.slice(0, -1)'方法。这将从表达式中删除最后一个数字。要清除所有数字，我们将使用'outputLower.innerHTML = '0';' 方法。这将用 0 替换表达式。

五、创建写点和括号的函数。

// function to get dot and bracket input
function pressDot() {
  outputLower.innerHTML += '.';
}

function pressBracket(e) {
  outputLower.innerHTML += e.innerHTML;
}
JavaScript

六、现在创建函数来计算结果。

// function to calculate the result
function pressEqual() {
  let exp = outputLower.innerHTML;
  outputUpper.innerHTML = exp;
  exp = exp.replace(/×/g, '*').replace(/÷/g, '/');
  let result;
  try {
    result = eval(exp);
    // if decimal number more than 4 decimal places
    if (result.toString().indexOf('.') !== -1) {
      result = result.toFixed(4);
    }
  } catch (e) {
    result = 'Error';
  }
  outputLower.innerHTML = result;
}
JavaScript

按下等号按钮 (=) 时将调用上述函数。它将计算表达式的结果并将其显示在outputLower中。

我们正在使用eval()方法来计算结果。

在这里，我们在 try 和 catch 块中执行表达式。如果表达式中有任何错误，则会显示错误。

我们也在检查结果是否为十进制数。如果它是一个十进制数，那么我们将它显示为 4 个小数位。

最后，结果显示在outputLower中，相应的表达式显示在outputUpper中。

七。现在创建函数来清除表达式和所有清除屏幕。

// clear one
function pressClear() {
  outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);
}

// clear all
function pressAllClear() {
  outputUpper.innerHTML = '';
  outputLower.innerHTML = '0';
}
JavaScript

要清除一个数字，我们将使用'outputLower.innerHTML.slice(0, -1)'方法。这将从表达式中删除最后一个数字。要清除所有数字，我们将使用'outputLower.innerHTML = '0';' 方法。这将用 0 替换表达式。

八。现在为键盘按钮添加事件监听器。

最后，为键盘按钮添加事件监听器，这样当任何按钮被按下时，它都会调用相应的函数，用户将能够从键盘本身运行计算器。

// add event listeners for keyboard buttons
document.addEventListener('keydown', function (e) {
  switch (e.key) {
    case '0':
      pressNum(document.querySelector('button:nth-child(2)'));
      break;
    case '1':
      pressNum(document.querySelector('button:nth-child(5)'));
      break;
    case '2':
      pressNum(document.querySelector('button:nth-child(6)'));
      break;
    case '3':
      pressNum(document.querySelector('button:nth-child(7)'));
      break;
    case '4':
      pressNum(document.querySelector('button:nth-child(9)'));
      break;
    case '5':
      pressNum(document.querySelector('button:nth-child(10)'));
      break;
    case '6':
      pressNum(document.querySelector('button:nth-child(11)'));
      break;
    case '7':
      pressNum(document.querySelector('button:nth-child(13)'));
      break;
    case '8':
      pressNum(document.querySelector('button:nth-child(14)'));
      break;
    case '9':
      pressNum(document.querySelector('button:nth-child(15)'));
      break;
    case '+':
      pressOperator(document.querySelector('button:nth-child(4)'));
      break;
    case '-':
      pressOperator(document.querySelector('button:nth-child(8)'));
      break;
    case '*':
      pressOperator(document.querySelector('button:nth-child(12)'));
      break;
    case '/':
      pressOperator(document.querySelector('button:nth-child(16)'));
      break;
    case '.':
      pressDot();
      break;
    case '(':
      pressBracket(document.querySelector('button:nth-child(18)'));
      break;
    case ')':
      pressBracket(document.querySelector('button:nth-child(19)'));
      break;
    case 'Enter':
      // prevent default action
      e.preventDefault();
      pressEqual();
      break;
    case 'Backspace':
      pressClear();
      break;
    case 'Escape':
      pressAllClear();
      break;
  }
});
JavaScript

在上面的代码中，您可以看到我们正在使用按钮位置来获取按钮。我们正在使用'document.querySelector('button:nth-child(2)')'来获取位置为 2 的按钮。这将获取数字为 0 的按钮。依此类推。

完整的 JavaScript 计算器程序

这是一个简单计算器的完整代码。

例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <title>Javascript Calculator</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

    body {
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #4e4e4e;
    }

    .calculator {
      background: #dd6f6f;
      border-radius: 5px;
      padding: 5px;
      width: 300px;
      min-width: 300px;
      box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4),
                        4px 4px 10px rgba(0, 0, 0, 0.7);
    }

    .output {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;
      background: #ffffff;
      min-height: 50px;
      padding: 5px;
      margin: 0 1px 10px;
      border-radius: 0.25rem;
      box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
    }

    .output pre {
      text-align: right;
      font-size: 25px;
      margin: 0;
      font-family: 'Orbitron', sans-serif;
      width: 288px;
      overflow-x: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .output pre::-webkit-scrollbar {
      display: none;
    }

    .output #upper {
      color: #424242;
      font-size: 18px;
    }

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

    .input button {
      width: calc(25% - 24px);
      height: 50px;
      margin: 8px 12px;
      border-radius: 50%;
      background-color: #c05d5d;
      box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),
                        1px 1px 5px rgba(94, 31, 31, 0.7);
      color: white;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      outline: none;
      border: none;
    }

    .input button:hover {
      background-color: #b35555;
    }

    .input button:active {
      box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),
                  inset -1px -1px 2px rgba(255, 255, 255, 0.3);
      color: #642929;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="calculator">
      <div class="output">
        <pre id="upper"></pre>
        <pre id="lower">0</pre>
      </div>
      <div class="input">
        <button onclick="pressAllClear()">AC</button>
        <button onclick="pressNum(this)">0</button>
        <button onclick="pressClear()"><i class="fas fa-backspace"></i></button>
        <button onclick="pressOperator(this)">+</button>
        <button onclick="pressNum(this)">1</button>
        <button onclick="pressNum(this)">2</button>
        <button onclick="pressNum(this)">3</button>
        <button onclick="pressOperator(this)">-</button>
        <button onclick="pressNum(this)">4</button>
        <button onclick="pressNum(this)">5</button>
        <button onclick="pressNum(this)">6</button>
        <button onclick="pressOperator(this)">&times;</button>
        <button onclick="pressNum(this)">7</button>
        <button onclick="pressNum(this)">8</button>
        <button onclick="pressNum(this)">9</button>
        <button onclick="pressOperator(this)">&div;</button>
        <button onclick="pressDot()">.</button>
        <button onclick="pressBracket(this)">(</button>
        <button onclick="pressBracket(this)">)</button>
        <button onclick="pressEqual()">=</button>
      </div>
    </div>
  </div>

  <script>
    // javascript calculator

    // upper output is for showing the expression
    let outputUpper = document.querySelector('#upper');
    // lower output is for showing the result
    let outputLower = document.querySelector('#lower');

    // function to get number input
    function pressNum(e) {
      if (outputLower.innerHTML === '0') {
        outputLower.innerHTML = e.innerHTML;
      } else {
        outputLower.innerHTML += e.innerHTML;
      }
    }

    // clear all
    function pressAllClear() {
      outputUpper.innerHTML = '';
      outputLower.innerHTML = '0';
    }

    // clear one
    function pressClear() {
      outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);
    }

    // calculate button
    function pressEqual() {
      let exp = outputLower.innerHTML;
      outputUpper.innerHTML = exp;
      exp = exp.replace(/×/g, '*').replace(/÷/g, '/');
      let result;
      try {
        result = eval(exp);
        // if decimal number more than 4 decimal places
        if (result.toString().indexOf('.') !== -1) {
          result = result.toFixed(4);
        }
      } catch (e) {
        result = 'Error';
      }
      outputLower.innerHTML = result;
    }

    function pressOperator(e) {
      // check last operator
      let lastOperator = outputLower.innerHTML.slice(-1);
      if (lastOperator === '+' || lastOperator === '-' || lastOperator === '×' || lastOperator === '÷') {
        output.innerHTML = outputLower.innerHTML.slice(0, -1) + e.innerHTML;
      } else {
        outputLower.innerHTML += e.innerHTML;
      }
    }

    function pressDot() {
      outputLower.innerHTML += '.';
    }

    function pressBracket(e) {
      outputLower.innerHTML += e.innerHTML;
    }

    // attach keyboard event
    document.addEventListener('keydown', function (e) {
      switch (e.key) {
        case '0':
          pressNum(document.querySelector('button:nth-child(2)'));
          break;
        case '1':
          pressNum(document.querySelector('button:nth-child(5)'));
          break;
        case '2':
          pressNum(document.querySelector('button:nth-child(6)'));
          break;
        case '3':
          pressNum(document.querySelector('button:nth-child(7)'));
          break;
        case '4':
          pressNum(document.querySelector('button:nth-child(9)'));
          break;
        case '5':
          pressNum(document.querySelector('button:nth-child(10)'));
          break;
        case '6':
          pressNum(document.querySelector('button:nth-child(11)'));
          break;
        case '7':
          pressNum(document.querySelector('button:nth-child(13)'));
          break;
        case '8':
          pressNum(document.querySelector('button:nth-child(14)'));
          break;
        case '9':
          pressNum(document.querySelector('button:nth-child(15)'));
          break;
        case '+':
          pressOperator(document.querySelector('button:nth-child(4)'));
          break;
        case '-':
          pressOperator(document.querySelector('button:nth-child(8)'));
          break;
        case '*':
          pressOperator(document.querySelector('button:nth-child(12)'));
          break;
        case '/':
          pressOperator(document.querySelector('button:nth-child(16)'));
          break;
        case '.':
          pressDot();
          break;
        case '(':
          pressBracket(document.querySelector('button:nth-child(18)'));
          break;
        case ')':
          pressBracket(document.querySelector('button:nth-child(19)'));
          break;
        case 'Enter':
          // prevent default action
          e.preventDefault();
          pressEqual();
          break;
        case 'Backspace':
          pressClear();
          break;
        case 'Escape':
          pressAllClear();
          break;
      }
    });
  </script>
</body>

</html>
HTML

结论

在这份完整的 JavaScript 计算器指南中，您已经学会了如何创建一个很棒的简单计算器。您可以使用它来计算任何数学表达式。键盘事件也附在计算器上。您也可以在您的网站或移动应用程序上使用计算器。

# javascript # 前端 # 开发语言
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟