正文

掌握JavaScript编写计算器：从基础到实现简单功能

/0 浏览量
0828

在数字的世界里，计算器是一个不可或缺的工具。而使用JavaScript编写一个简单的计算器，不仅可以锻炼你的编程技能，还能让你更深入地理解JavaScript的工作原理。本文将带你从JavaScript的基础语法开始，一步步实现一个简单的计算器。

JavaScript基础

在开始编写计算器之前，我们需要先了解一些JavaScript的基础知识。JavaScript是一种轻量级的编程语言，主要用于网页开发。以下是几个关键概念：

  • 变量：用于存储数据，例如数字、字符串等。
  • 数据类型：包括数字（Number）、字符串（String）、布尔值（Boolean）等。
  • 运算符：用于执行数学运算，例如加法（+）、减法（-）、乘法（*）、除法（/）等。
  • 函数：用于封装可重复使用的代码块。

简单计算器的实现

下面我们将通过一个简单的例子来展示如何使用JavaScript编写一个计算器。

1. HTML结构

首先，我们需要创建一个HTML文件，并定义计算器的界面。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</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="appendNumber('3')">3</button>
        <button onclick="setOperation('+')">+</button>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="setOperation('-')">-</button>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="setOperation('*')">*</button>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="setOperation('/')">/</button>
    </div>

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

2. JavaScript代码

接下来，我们需要编写JavaScript代码来实现计算器的功能。以下是一个简单的JavaScript文件（calculator.js）：

let currentInput = '';
let previousInput = '';
let operation = null;

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

function setOperation(op) {
    if (currentInput === '') return;
    if (previousInput !== '') calculate();
    operation = op;
    previousInput = currentInput;
    currentInput = '';
}

function clearDisplay() {
    currentInput = '';
    previousInput = '';
    operation = null;
    updateDisplay();
}

function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            if (current === 0) {
                alert('除数不能为0');
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    currentInput = result.toString();
    operation = null;
    previousInput = '';
    updateDisplay();
}

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

3. 运行计算器

将HTML和JavaScript代码保存到相应的文件中，并在浏览器中打开HTML文件。现在，你应该能看到一个简单的计算器界面，并可以使用它进行基本的数学运算。

总结

通过本文的学习，你不仅掌握了JavaScript编写计算器的基础知识，还深入了解了JavaScript的一些关键概念。希望这篇文章能帮助你更好地理解和应用JavaScript。在接下来的学习中，你可以尝试添加更多功能，例如支持更复杂的运算、图形界面等。祝你学习愉快！

-- 展开阅读全文 --