3分钟内创建一个简单计算器，展示你的编程实力

2023-04-29 11:46:21

用代码构建计算器：一个从初学者到专业人士的详细指南

在当今快节奏的数字世界中，计算器已经成为我们日常生活中的必备工具。从简单的数学计算到复杂的科学公式，计算器在我们的工作、学习和个人生活中发挥着至关重要的作用。虽然市场上有各种各样的计算器可供选择，但自己编写一个计算器程序不仅能让我们深入了解计算背后的原理，还能提升我们的编程技能。

本博客将带您逐步完成编写一个简单计算器的过程，从头开始构建，使用纯 JavaScript。通过这个分步指南，我们将深入探索计算器的基本功能，并提供实用代码示例。准备好踏上编程之旅，体验创建自己的计算器的乐趣吧！

1. 创建 HTML 结构

首先，让我们从创建计算器程序的 HTML 结构开始。HTML（超文本标记语言）是用于构建网页的基础语言，它为我们的计算器提供了一个框架。以下 HTML 代码将创建计算器所需的基本元素：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>简单计算器</h1>
    <input type="number" id="first-number">
    <input type="number" id="second-number">
    <select id="operation">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <button id="calculate-button">计算</button>
    <div id="result"></div>
  </body>
</html>

2. 添加 CSS 样式

为了让我们的计算器赏心悦目，我们还需要添加一些 CSS 样式。CSS（层叠样式表）是一种用于控制网页外观和布局的语言。以下是让我们的计算器更具吸引力的 CSS 代码：

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

h1 {
  text-align: center;
}

input {
  width: 100px;
  padding: 5px;
  margin-right: 5px;
}

select {
  width: 50px;
  padding: 5px;
  margin-right: 5px;
}

button {
  padding: 5px 10px;
  background-color: #008CBA;
  color: white;
  border: none;
  border-radius: 5px;
}

#result {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

3. 编写 JavaScript 脚本

现在，到了编写 JavaScript 脚本的时候了。JavaScript 是一种流行且功能强大的编程语言，用于创建交互式网页和应用程序。以下是让我们的计算器程序正常工作的 JavaScript 代码：

const firstNumber = document.getElementById("first-number");
const secondNumber = document.getElementById("second-number");
const operation = document.getElementById("operation");
const calculateButton = document.getElementById("calculate-button");
const result = document.getElementById("result");

calculateButton.addEventListener("click", function() {
  const num1 = Number(firstNumber.value);
  const num2 = Number(secondNumber.value);
  const op = operation.value;

  let calculationResult;

  switch (op) {
    case "+":
      calculationResult = num1 + num2;
      break;
    case "-":
      calculationResult = num1 - num2;
      break;
    case "*":
      calculationResult = num1 * num2;
      break;
    case "/":
      calculationResult = num1 / num2;
      break;
  }

  result.textContent = calculationResult;
});