正文

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

/0 浏览量
0818

在数字时代，计算器是一个基础且实用的工具。学习如何使用JavaScript编写一个简单的计算器，不仅能让你更好地理解编程逻辑，还能让你在不需要安装额外软件的情况下，实现一个实用的Web应用。下面，我们将一步步从JavaScript的基础语法开始，到实现一个简单的计算器界面。

JavaScript基础

首先，我们需要了解一些JavaScript的基础知识。JavaScript是一种轻量级的编程语言，它运行在浏览器中，能够使网页更加动态和交互式。

变量和数据类型

在JavaScript中，变量是用来存储数据的。基本的数据类型包括数字（Number）、字符串（String）和布尔值（Boolean）。

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

控制结构

JavaScript使用条件语句和循环来控制程序的流程。

条件语句

if (age > 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}

循环

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

计算器逻辑

接下来，我们来探讨计算器的逻辑。一个计算器通常需要处理加、减、乘、除等基本运算。

运算函数

我们可以创建几个函数来处理不同的运算。

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

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    if (b !== 0) {
        return a / b;
    } else {
        return "除数不能为0";
    }
}

实现简单界面

现在，我们来创建一个简单的计算器界面。我们可以使用HTML和CSS来设计界面，然后用JavaScript来添加交互功能。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="setOperation('+')">+</button>
        <!-- 其他按钮 -->
        <button onclick="calculate()">=</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

.calculator {
    /* 样式设置 */
}
#display {
    /* 显示区域样式 */
}
button {
    /* 按钮样式 */
}

JavaScript交互

let currentNumber = '';
let previousNumber = '';
let operation = '';

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

function setOperation(op) {
    if (currentNumber !== '') {
        if (previousNumber !== '') {
            calculate();
        }
        operation = op;
        previousNumber = currentNumber;
        currentNumber = '';
    }
}

function calculate() {
    let result;
    switch (operation) {
        case '+':
            result = add(parseFloat(previousNumber), parseFloat(currentNumber));
            break;
        case '-':
            result = subtract(parseFloat(previousNumber), parseFloat(currentNumber));
            break;
        case '*':
            result = multiply(parseFloat(previousNumber), parseFloat(currentNumber));
            break;
        case '/':
            result = divide(parseFloat(previousNumber), parseFloat(currentNumber));
            break;
        default:
            return;
    }
    currentNumber = result.toString();
    operation = '';
    updateDisplay();
}

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

通过以上步骤，我们实现了一个简单的计算器。这只是一个起点，你可以根据自己的需求进一步扩展和优化它。例如，可以添加更多的功能，如三角函数、指数运算等，或者改进界面设计，使其更加美观和用户友好。

-- 展开阅读全文 --