正文

学会用jQuery轻松打造实用计算器，实现加减乘除，告别手动计算烦恼

/0 浏览量
1019

在数字化时代，计算器是我们日常生活中不可或缺的工具。无论是学生做作业，还是职场人士处理数据，计算器都能大大提高效率。而使用jQuery，我们可以轻松打造一个具有加减乘除功能的实用计算器，让你告别手动计算的烦恼。下面，就让我们一起来看看如何用jQuery实现这个功能吧！

一、准备工作

在开始编写代码之前，我们需要做一些准备工作：

  1. HTML结构：首先，我们需要创建一个简单的HTML结构，包括显示屏、数字键和运算符键。
  2. CSS样式：为了使计算器看起来更美观，我们可以添加一些CSS样式。
  3. jQuery库：当然，我们还需要引入jQuery库。

以下是一个简单的HTML结构示例：

<div id="calculator">
    <input type="text" id="display" disabled>
    <div class="keys">
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="operator">+</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operator">-</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operator">*</button>
        <button class="number">0</button>
        <button class="equals">=</button>
        <button class="operator">/</button>
        <button class="clear">C</button>
    </div>
</div>

接下来，我们添加一些CSS样式，使计算器看起来更美观：

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

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

.keys button {
    width: 20%;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

.keys button:hover {
    background-color: #f0f0f0;
}

最后，引入jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

二、编写JavaScript代码

现在，我们可以开始编写JavaScript代码了。在这个例子中，我们将使用jQuery来实现计算器的功能。

$(document).ready(function() {
    var currentInput = '';
    var firstNumber = 0;
    var secondNumber = 0;
    var operator = '';

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

    $('.operator').click(function() {
        firstNumber = parseFloat(currentInput);
        operator = $(this).text();
        currentInput = '';
    });

    $('.equals').click(function() {
        secondNumber = parseFloat(currentInput);
        switch (operator) {
            case '+':
                $('#display').val(firstNumber + secondNumber);
                break;
            case '-':
                $('#display').val(firstNumber - secondNumber);
                break;
            case '*':
                $('#display').val(firstNumber * secondNumber);
                break;
            case '/':
                if (secondNumber === 0) {
                    $('#display').val('Error');
                } else {
                    $('#display').val(firstNumber / secondNumber);
                }
                break;
        }
        currentInput = '';
    });

    $('.clear').click(function() {
        currentInput = '';
        firstNumber = 0;
        secondNumber = 0;
        operator = '';
        $('#display').val('');
    });
});

三、总结

通过以上步骤，我们成功使用jQuery打造了一个具有加减乘除功能的实用计算器。现在，你可以将这个计算器应用到你的项目中，或者进一步扩展其功能，使其更加完善。希望这篇文章能帮助你更好地理解如何使用jQuery实现计算器功能，让你在编程的道路上更加得心应手！

-- 展开阅读全文 --