正文

掌握JS编写计算器：从基础到实现功能全面计算器教程

/0 浏览量
0721

前言

计算器是一个简单而又实用的工具，它不仅可以帮助我们进行日常的计算，还能在编程学习中锻炼我们的逻辑思维和编程能力。在本教程中，我们将一步步教你如何使用JavaScript（JS）语言编写一个功能全面的计算器。

第一部分：JavaScript基础

在开始编写计算器之前，我们需要掌握一些JavaScript的基础知识。以下是一些关键概念：

1. 变量和数据类型

在JavaScript中，变量是用来存储数据的容器。JavaScript有几种基本的数据类型，包括数字、字符串、布尔值等。

let age = 25;
let name = "Alice";
let isStudent = true;

2. 控制结构

JavaScript提供了条件语句和循环结构来控制代码的执行流程。

条件语句

if (age > 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}

循环结构

for (let i = 0; i < 5; i++) {
  console.log(i);
}

3. 函数

函数是JavaScript中组织代码的基本单元。

function add(a, b) {
  return a + b;
}

console.log(add(3, 4)); // 输出：7

第二部分：计算器设计思路

在开始编写代码之前，我们需要先设计计算器的功能。以下是一个简单的计算器功能列表：

  • 加法
  • 减法
  • 乘法
  • 除法
  • 清除
  • 显示结果

第三部分：实现计算器

1. 创建HTML结构

首先，我们需要创建一个HTML页面来展示计算器的界面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
</head>
<body>
  <div id="calculator">
    <input type="text" id="display" disabled>
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendNumber('1')">1</button>
    <button onclick="appendNumber('2')">2</button>
    <!-- 其他数字按钮 -->
    <button onclick="calculate('+')">+</button>
    <button onclick="calculate('-')">-</button>
    <!-- 其他运算符按钮 -->
    <button onclick="equals()">=</button>
  </div>

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

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码来实现计算器的功能。

let currentInput = "";
let firstNumber = 0;
let secondNumber = 0;
let operator = "";

function appendNumber(number) {
  currentInput += number;
  updateDisplay();
}

function clearDisplay() {
  currentInput = "";
  firstNumber = 0;
  secondNumber = 0;
  operator = "";
  updateDisplay();
}

function updateDisplay() {
  document.getElementById("display").value = currentInput;
}

function calculate(op) {
  if (op === '+' || op === '-' || op === '*' || op === '/') {
    firstNumber = parseFloat(currentInput);
    operator = op;
    currentInput = "";
  }
}

function equals() {
  secondNumber = parseFloat(currentInput);
  let result = 0;

  switch (operator) {
    case '+':
      result = firstNumber + secondNumber;
      break;
    case '-':
      result = firstNumber - secondNumber;
      break;
    case '*':
      result = firstNumber * secondNumber;
      break;
    case '/':
      if (secondNumber !== 0) {
        result = firstNumber / secondNumber;
      } else {
        alert("Division by zero is not allowed.");
        return;
      }
      break;
  }

  currentInput = result.toString();
  updateDisplay();
}

3. 测试计算器

现在，我们可以打开HTML文件，并在浏览器中测试计算器的功能。

结语

通过本教程，你学会了如何使用JavaScript编写一个功能全面的计算器。这是一个非常实用的技能，可以帮助你在编程学习中提升自己的能力。希望你在今后的项目中能够运用所学知识，创作出更多优秀的作品！

-- 展开阅读全文 --