当前位置：首页 > jquery

jquery 计算器

2026-02-03 14:57:20jquery

jQuery 计算器实现

创建一个基于 jQuery 的计算器需要结合 HTML、CSS 和 jQuery 代码。以下是实现一个简单计算器的步骤：

jquery 计算器

HTML 结构

创建一个包含数字按钮、操作符按钮和显示区域的 HTML 结构。

jquery 计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" disabled>
        <div class="buttons">
            <button class="btn" value="7">7</button>
            <button class="btn" value="8">8</button>
            <button class="btn" value="9">9</button>
            <button class="btn operator" value="/">/</button>

            <button class="btn" value="4">4</button>
            <button class="btn" value="5">5</button>
            <button class="btn" value="6">6</button>
            <button class="btn operator" value="*">*</button>

            <button class="btn" value="1">1</button>
            <button class="btn" value="2">2</button>
            <button class="btn" value="3">3</button>
            <button class="btn operator" value="-">-</button>

            <button class="btn" value="0">0</button>
            <button class="btn" value=".">.</button>
            <button class="btn clear" value="C">C</button>
            <button class="btn operator" value="+">+</button>

            <button class="btn equal" value="=">=</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

为计算器添加基本样式，使其更美观。

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

.display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 18px;
    text-align: right;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.btn {
    padding: 10px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: #e0e0e0;
}

.btn:hover {
    background: #d0d0d0;
}

.operator {
    background: #ff9800;
    color: white;
}

.equal {
    background: #4caf50;
    color: white;
    grid-column: span 4;
}

.clear {
    background: #f44336;
    color: white;
}

jQuery 逻辑

使用 jQuery 实现计算器的功能逻辑。

$(document).ready(function() {
    let currentInput = '';
    let previousInput = '';
    let operation = null;
    let resetScreen = false;

    $('.btn').click(function() {
        const value = $(this).val();

        if ($(this).hasClass('clear')) {
            currentInput = '';
            previousInput = '';
            operation = null;
            $('.display').val('0');
            return;
        }

        if ($(this).hasClass('equal')) {
            if (operation && previousInput && currentInput) {
                currentInput = calculate(previousInput, currentInput, operation);
                $('.display').val(currentInput);
                operation = null;
                resetScreen = true;
            }
            return;
        }

        if ($(this).hasClass('operator')) {
            if (currentInput === '') return;
            if (previousInput !== '') {
                currentInput = calculate(previousInput, currentInput, operation);
            }
            operation = value;
            previousInput = currentInput;
            resetScreen = true;
            $('.display').val(currentInput);
            return;
        }

        if (resetScreen) {
            currentInput = '';
            resetScreen = false;
        }

        if (value === '.' && currentInput.includes('.')) return;
        currentInput += value;
        $('.display').val(currentInput);
    });

    function calculate(a, b, op) {
        a = parseFloat(a);
        b = parseFloat(b);
        switch (op) {
            case '+': return a + b;
            case '-': return a - b;
            case '*': return a * b;
            case '/': return a / b;
            default: return b;
        }
    }
});