正文

掌握JS编写简单计算器：入门级教程及实用案例

/0 浏览量
1106

在这个数字无处不在的时代，计算器是一个不可或缺的工具。随着前端技术的发展，使用JavaScript（JS）编写一个简单的计算器已经成为许多开发者入门学习的一个很好的项目。本文将带你从零开始，一步步掌握如何用JavaScript编写一个实用的计算器。

理解JavaScript环境

在开始编写代码之前，你需要确保你的计算机上安装了JavaScript运行环境。目前最常用的JavaScript运行环境是Node.js，但在这里，我们主要关注浏览器中的JavaScript环境。

安装Node.js

  1. 访问Node.js官网。
  2. 下载适合你操作系统的Node.js版本。
  3. 按照提示完成安装。

使用浏览器开发者工具

大多数现代浏览器都内置了开发者工具，用于调试JavaScript代码。以下是如何在Chrome浏览器中打开开发者工具：

  1. 打开Chrome浏览器。
  2. 按下 F12 键或右键点击网页元素选择“检查”。
  3. 在弹出的开发者工具中，点击“控制台”标签。

创建计算器的基本结构

一个简单的计算器通常包含以下几个部分：

  1. 显示屏（通常是一个文本框或段落元素）。
  2. 数字和操作符按钮。
  3. 功能按钮，如“=”和“C”（清除）。

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>
        <div id="buttons">
            <button onclick="appendNumber('1')">1</button>
            <button onclick="appendNumber('2')">2</button>
            <!-- 添加更多按钮 -->
            <button onclick="calculate()">=</button>
            <button onclick="clearDisplay()">C</button>
        </div>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

CSS样式

接下来，为你的计算器添加一些基本的样式：

#calculator {
    width: 300px;
    margin: auto;
    border: 1px solid #ccc;
    padding: 10px;
}

#display {
    width: 100%;
    margin-bottom: 10px;
    text-align: right;
}

#buttons button {
    width: 25%;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}

JavaScript逻辑

现在，我们来编写JavaScript代码，让计算器能够响应按钮点击事件。

1. 初始化计算器

首先，我们需要一个变量来存储计算器的当前状态。

let currentInput = '';

2. 添加数字

每当用户点击一个数字按钮时，我们将数字添加到currentInput变量中。

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

3. 更新显示屏

这个函数负责将currentInput的值更新到显示屏上。

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

4. 清除显示屏

这个函数负责将显示屏清空。

function clearDisplay() {
    currentInput = '';
    updateDisplay();
}

5. 计算结果

当用户点击等号按钮时，我们需要计算当前表达式的结果。

function calculate() {
    try {
        let result = eval(currentInput);
        currentInput = result.toString();
        updateDisplay();
    } catch (error) {
        alert('Invalid expression');
        clearDisplay();
    }
}

完整的JavaScript代码

以下是完整的JavaScript代码，包含上述所有功能：

let currentInput = '';

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

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

function clearDisplay() {
    currentInput = '';
    updateDisplay();
}

function calculate() {
    try {
        let result = eval(currentInput);
        currentInput = result.toString();
        updateDisplay();
    } catch (error) {
        alert('Invalid expression');
        clearDisplay();
    }
}

测试和改进

将上面的HTML、CSS和JavaScript代码保存到相应的文件中，并在浏览器中打开HTML文件。你应该能看到一个简单的计算器，它可以进行基本的加、减、乘、除运算。

为了提高用户体验，你可以添加更多的功能，比如：

  • 支持键盘输入。
  • 支持历史记录。
  • 支持更多的高级运算，如三角函数、指数等。

编写计算器是一个很好的练习，可以帮助你更好地理解JavaScript编程的基本概念。希望本文能帮助你入门，并激发你对JavaScript的兴趣。

-- 展开阅读全文 --