正文

轻松学会用jQuery打造实用计算器：步骤详解与代码实例

/0 浏览量
0407

了解jQuery与计算器的基本概念

在开始打造一个实用计算器之前，我们先来了解一下jQuery和计算器的基本概念。

jQuery简介

jQuery是一个快速、小型且功能丰富的JavaScript库。它简化了HTML文档的遍历、事件处理、动画和AJAX操作。使用jQuery，你可以轻松地实现跨浏览器的兼容性。

计算器简介

计算器是一种用于执行数学运算的电子设备或软件应用程序。它可以帮助我们快速进行加、减、乘、除等运算。

准备工作

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

  1. HTML结构：定义计算器的布局，包括显示屏和按钮。
  2. CSS样式：设置计算器的样式，使其看起来美观。
  3. jQuery代码：编写JavaScript代码，实现计算器的功能。

步骤详解

1. HTML结构

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

<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="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="clearDisplay()">C</button>
    <button onclick="setOperation('/')">/</button>
</div>

2. CSS样式

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

#calculator {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

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

button:hover {
    background-color: #f2f2f2;
}

3. jQuery代码

现在，我们来编写jQuery代码，实现计算器的功能：

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

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

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

    function calculate() {
        var result;
        var prev = parseFloat(previousInput);
        var 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 '/':
                result = prev / current;
                break;
            default:
                return;
        }
        currentInput = result.toString();
        operation = null;
        previousInput = '';
        updateDisplay();
    }

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

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

代码实例

以下是一个完整的计算器示例，包括HTML、CSS和jQuery代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Calculator</title>
    <style>
        /* CSS样式 */
    </style>
</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="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="clearDisplay()">C</button>
        <button onclick="setOperation('/')">/</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // jQuery代码
    </script>
</body>
</html>

总结

通过本文的讲解，你现在已经学会了如何使用jQuery打造一个实用计算器。你可以根据自己的需求，对计算器的功能进行扩展，例如添加更多运算符、支持科学计算等。希望这篇文章对你有所帮助！

-- 展开阅读全文 --