正文

轻松学会：用jQuery打造输入即计算的在线简易计算器

/0 浏览量
0828

在这个数字化时代，计算器是一个日常生活中不可或缺的工具。而使用jQuery来打造一个输入即计算的在线简易计算器，不仅能提升用户体验，还能让你深入了解jQuery的强大功能。下面，我们就来一步步教你如何打造这样一个实用的计算器。

1. 准备工作

在开始之前，我们需要准备以下工具：

  • HTML: 用于构建计算器的界面。
  • CSS: 用于美化计算器的样式。
  • jQuery: 用于实现计算器的交互功能。

你可以从以下链接下载所需的资源：

2. 创建计算器界面

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <link rel="stylesheet" href="calculator.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="calculator.js"></script>
</head>
<body>
    <div class="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>
</body>
</html>

3. 设置计算器样式

接下来，我们需要为计算器添加一些样式。以下是一个CSS示例：

body {
    font-family: Arial, sans-serif;
}

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

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

button {
    width: 25%;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}

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

4. 实现计算器功能

最后，我们需要使用jQuery来实现计算器的功能。以下是一个JavaScript示例：

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

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

    function setOperation(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;
        switch (operation) {
            case '+':
                result = firstNumber + secondNumber;
                break;
            case '-':
                result = firstNumber - secondNumber;
                break;
            case '*':
                result = firstNumber * secondNumber;
                break;
            case '/':
                result = firstNumber / secondNumber;
                break;
            default:
                return;
        }
        currentInput = result.toString();
        operation = '';
        $('#display').val(currentInput);
    }

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

通过以上步骤，我们就完成了一个输入即计算的在线简易计算器的制作。你可以根据自己的需求，对计算器进行美化或添加更多功能。希望这篇文章能帮助你！

-- 展开阅读全文 --