正文

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

/0 浏览量
1108

在这个数字化时代，计算器是一个不可或缺的工具。而使用jQuery来创建一个实用的计算器，不仅可以提升网页的交互性，还能让你更好地理解jQuery的工作原理。下面，我将一步步带你学会如何用jQuery打造一个实用的计算器。

准备工作

在开始之前，请确保你的电脑上安装了以下工具：

  • HTML: 用于构建网页的基本结构。
  • CSS: 用于美化网页的样式。
  • jQuery: 一个快速、小型且功能丰富的JavaScript库。

你可以从官网下载jQuery。

创建HTML结构

首先，我们需要创建一个简单的HTML结构来承载计算器的界面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery计算器</title>
    <link rel="stylesheet" href="styles.css">
</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="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="appendOperation('/')">/</button>
            <button onclick="calculate()">=</button>
            <button onclick="clearDisplay()">C</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

在这个HTML结构中，我们创建了一个div元素作为计算器的容器，其中包含一个文本输入框用于显示计算结果，以及一个div元素包含所有的按钮。

添加CSS样式

接下来，我们需要为计算器添加一些基本的CSS样式。

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

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

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

在这个CSS样式表中，我们为计算器添加了一些基本的样式，包括宽度、边框、内边距和圆角等。

编写jQuery脚本

现在，我们来编写jQuery脚本，实现计算器的核心功能。

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

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

    function appendOperation(op) {
        if (currentInput === '') return;
        if (operation !== '') {
            calculate();
        }
        operation = op;
        firstNumber = parseFloat(currentInput);
        currentInput = '';
        $('#display').val(firstNumber + ' ' + operation);
    }

    function calculate() {
        var secondNumber = parseFloat(currentInput);
        var result = 0;
        switch (operation) {
            case '+':
                result = firstNumber + secondNumber;
                break;
            case '-':
                result = firstNumber - secondNumber;
                break;
            case '*':
                result = firstNumber * secondNumber;
                break;
            case '/':
                result = firstNumber / secondNumber;
                break;
        }
        currentInput = result.toString();
        operation = '';
        $('#display').val(currentInput);
    }

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

在这个jQuery脚本中，我们定义了几个函数来处理按钮点击事件。appendNumber函数用于将数字添加到当前输入中，appendOperation函数用于添加运算符，calculate函数用于计算结果，clearDisplay函数用于清除显示。

实战案例

现在，你已经学会了如何使用jQuery创建一个基本的计算器。你可以根据自己的需求，添加更多的功能，比如：

  • 添加更多运算符，如平方根、百分比等。
  • 添加错误处理，如除以零等。
  • 添加动画效果，提升用户体验。

通过不断地实践和改进，你将能够打造出一个功能强大、美观实用的计算器。

-- 展开阅读全文 --