正文

轻松掌握jQuery，学会用jQuery实现简单计算器功能教程

/0 浏览量
0827

引言

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使得 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作变得简单。在这个教程中，我们将学习如何使用 jQuery 来创建一个简单的计算器。

准备工作

在开始之前，请确保您的电脑上已安装以下软件：

  • HTML 编辑器（如 Visual Studio Code、Sublime Text 等）
  • 浏览器（如 Chrome、Firefox 等）
  • jQuery 库

创建 HTML 结构

首先，我们需要创建一个简单的 HTML 结构来表示计算器。以下是一个示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery 简单计算器</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="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="appendOperation('+')">+</button>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="appendOperation('-')">-</button>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="appendOperation('*')">*</button>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendOperation('/')">/</button>
    </div>

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

在上面的代码中，我们创建了一个包含数字按钮、操作符按钮和显示结果的文本框的计算器。

添加 CSS 样式

为了使计算器看起来更美观，我们可以添加一些 CSS 样式。以下是一个简单的样式示例：

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

#calculator button {
    width: 25%;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f2f2f2;
    cursor: pointer;
}

#display {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: right;
}

在上面的代码中，我们为计算器、按钮和显示结果文本框添加了一些基本的样式。

添加 jQuery 代码

现在，我们需要使用 jQuery 来实现计算器的功能。以下是一个简单的 jQuery 代码示例：

$(document).ready(function() {
    var currentInput = '';

    function appendNumber(number) {
        currentInput += number;
        $('#display').val(currentInput);
    }

    function appendOperation(operation) {
        currentInput += ' ' + operation + ' ';
        $('#display').val(currentInput);
    }

    function calculate() {
        var result = eval(currentInput);
        $('#display').val(result);
        currentInput = '';
    }

    function clearDisplay() {
        $('#display').val('');
        currentInput = '';
    }
});

在上面的代码中，我们定义了四个函数：

  • appendNumber(number)：将数字添加到当前输入。
  • appendOperation(operation)：将操作符添加到当前输入。
  • calculate()：计算当前输入并显示结果。
  • clearDisplay()：清除显示结果和当前输入。

总结

通过以上步骤，我们已经成功地使用 jQuery 创建了一个简单的计算器。这个计算器可以执行基本的加、减、乘、除运算。您可以在此基础上添加更多功能，例如错误处理、更复杂的数学运算等。

希望这个教程能帮助您轻松掌握 jQuery 并实现简单的计算器功能。祝您学习愉快！

-- 展开阅读全文 --