如何使用JavaScript实现一个简单的计算器｜青训营

Bellayen
388 阅读5分钟

如何使用JavaScript实现一个简单的计算器

项目介绍

在这个项目中，我们将使用JavaScript来实现一个简单的计算器，可以进行基本的四则运算（加、减、乘、除）。我们将使用HTML和CSS来创建计算器的界面，使用JavaScript来处理用户的输入和输出。

项目目标

通过这个项目，我们可以学习和练习以下知识点：

  • HTML的基本结构和语法，如<div>、<button>、<input>等标签。
  • CSS的基本样式和布局，如color、font-size、display、flex等属性。
  • JavaScript的基本语法和逻辑，如变量、函数、事件监听、条件判断、循环等。
  • JavaScript的DOM操作，如document.getElementById()、document.querySelector()、element.innerHTML、element.addEventListener()等方法。

项目步骤

第一步：创建HTML结构

首先，我们需要创建一个HTML文件，用来定义计算器的界面。我们可以使用一个<div>元素作为计算器的容器，然后在其中添加一个<input>元素作为显示屏，用来显示用户输入的数字和运算符，以及计算结果。接下来，我们可以添加四个<div>元素作为按钮组，分别包含数字按钮、运算符按钮、清除按钮和等号按钮。每个按钮组中可以使用多个<button>元素来表示不同的按钮。我们可以给每个元素添加一个id属性或者一个class属性，方便我们后续用CSS和JavaScript来操作它们。以下是HTML结构的示例代码：

<!-- 计算器的容器 -->
<div id="calculator">
  <!-- 显示屏 -->
  <input id="screen" type="text" value="0" readonly />
  <!-- 按钮组 -->
  <div id="buttons">
    <!-- 数字按钮 -->
    <div id="numbers">
      <button class="number">1</button>
      <button class="number">2</button>
      <button class="number">3</button>
      <button class="number">4</button>
      <button class="number">5</button>
      <button class="number">6</button>
      <button class="number">7</button>
      <button class="number">8</button>
      <button class="number">9</button>
      <button class="number">0</button>
    </div>
    <!-- 运算符按钮 -->
    <div id="operators">
      <button class="operator">+</button>
      <button class="operator">-</button>
      <button class="operator">×</button>
      <button class="operator">÷</button>
    </div>
    <!-- 清除按钮 -->
    <div id="clear">
      <button id="clear-button">C</button>
    </div>
    <!-- 等号按钮 -->
    <div id="equal">
      <button id="equal-button">=</button>
    </div>
  </div>
</div>

第二步：添加CSS样式

接下来，我们需要创建一个CSS文件，用来美化计算器的界面。我们可以使用CSS选择器来选中HTML中的元素，并给它们添加不同的样式属性。例如，我们可以给计算器的容器添加一个边框、一个背景色、一个宽度和一个高度；我们可以给显示屏添加一个字体大小、一个对齐方式、一个边距和一个内边距；我们可以给按钮组添加一个弹性布局（flexbox），让它们水平或垂直排列；我们可以给每个按钮添加一个颜色、一个字体大小、一个宽度和一个高度等。以下是CSS样式的示例代码：

/* 计算器的容器 */
#calculator {
  /* 添加一个边框 */
  border: 2px solid black;
  /* 添加一个背景色 */
  background-color: lightgray;
  /* 添加一个宽度 */
  width: 300px;
  /* 添加一个高度 */
  height: 400px;
}

/* 显示屏 */
#screen {
  /* 添加一个字体大小 */
  font-size: 24px;
  /* 添加一个对齐方式 */
  text-align: right;
  /* 添加一个边距 */
  margin: 10px;
  /* 添加一个内边距 */
  padding: 10px;
}

/* 按钮组 */
#buttons {
  /* 添加一个弹性布局，水平排列 */
  display: flex;
}

/* 数字按钮和运算符按钮 */
#numbers,
#operators {
  /* 添加一个弹性布局，垂直排列 */
  display: flex;
  flex-direction: column;
}

/* 每个按钮 */
button {
  /* 添加一个颜色 */
  color: white;
  /* 添加一个字体大小 */
  font-size: 24px;
  /* 添加一个宽度 */
  width: 50px;
  /* 添加一个高度 */
  height: 50px;
}

/* 数字按钮的颜色 */
.number {
  background-color: blue;
}

/* 运算符按钮的颜色 */
.operator {
  background-color: green;
}

/* 清除按钮和等号按钮的颜色 */
#clear-button,
#equal-button {
  background-color: red;
}

第三步：编写JavaScript逻辑

最后，我们需要创建一个JavaScript文件，用来实现计算器的功能。我们可以使用JavaScript的DOM方法来选中HTML中的元素，并给它们添加事件监听器，用来处理用户的点击事件。例如，我们可以给每个数字按钮添加一个点击事件监听器，当用户点击数字按钮时，将数字显示在显示屏上；我们可以给每个运算符按钮添加一个点击事件监听器，当用户点击运算符按钮时，将运算符显示在显示屏上，并记录当前的数字和运算符；我们可以给清除按钮添加一个点击事件监听器，当用户点击清除按钮时，将显示屏清零，并重置当前的数字和运算符；我们可以给等号按钮添加一个点击事件监听器，当用户点击等号按钮时，根据当前的数字和运算符，计算并显示结果。以下是JavaScript逻辑的示例代码：

// 获取显示屏元素
let screen = document.getElementById("screen");
// 获取所有数字按钮元素
let numbers = document.getElementsByClassName("number");
// 获取所有运算符按钮元素
let operators = document.getElementsByClassName("operator");
// 获取清除按钮元素
let clearButton = document.getElementById("clear-button");
// 获取等号按钮元素
let equalButton = document.getElementById("equal-button");

// 定义两个变量，用来存储当前的数字和运算符
let currentNumber = "";
let currentOperator = "";

// 给每个数字按钮添加点击事件监听器
for (let number of numbers) {
  number.addEventListener("click", function () {
    // 获取用户点击的数字
    let value = this.innerHTML;
    // 将数字显示在显示屏上，并更新当前的数字
    screen.value += value;
    currentNumber += value;
  });
}

// 给每个运算符按钮添加点击事件监听器
for (let operator of operators) {
  operator.addEventListener("click", function () {
    // 获取用户点击的运算符
    let value = this.innerHTML;
    // 判断当前是否已经有运算符，如果有，则先计算结果，再显示新的运算符
    if (currentOperator) {
      calculate();
    }
    // 将运算符显示在显示屏上，并更新当前的运算符
    screen.value += value;
    currentOperator = value;
    // 将当前的数字清空，为下一次输入做准备
    currentNumber = "";
  });
}

// 给清除按钮添加点击事件监听器
clearButton.addEventListener("click", function () {
  // 将显示屏清零，并重置当前的数字和运算符
  screen.value = "0";
  currentNumber = "";
  currentOperator = "";
});

// 给等号按钮添加点击事件监听器
equalButton.addEventListener("click",
avatar
文章
阅读
粉丝