当前位置：首页 > jquery

jquery计算器

2026-04-08 08:03:30jquery

jQuery 计算器实现步骤

基本结构

创建一个简单的计算器需要HTML、CSS和jQuery的结合。HTML负责结构，CSS负责样式，jQuery负责逻辑交互。

jquery计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Calculator</title>
    <style>
        #calculator {
            width: 200px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #display {
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            font-size: 18px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
        }
        button {
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>+</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>-</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>*</button>
            <button>0</button>
            <button>.</button>
            <button>=</button>
            <button>/</button>
            <button>C</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

jQuery 逻辑

在script.js中编写计算器的逻辑。主要功能包括数字输入、运算符处理、计算和清除。

jquery计算器

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

    $('.buttons button').click(function() {
        const value = $(this).text();

        if (value >= '0' && value <= '9' || value === '.') {
            if (currentInput === '0' || resetScreen) {
                currentInput = value;
                resetScreen = false;
            } else {
                currentInput += value;
            }
            $('#display').val(currentInput);
        }

        if (value === '+' || value === '-' || value === '*' || value === '/') {
            if (currentInput === '') return;
            if (previousInput !== '') {
                calculate();
            }
            operation = value;
            previousInput = currentInput;
            currentInput = '';
        }

        if (value === '=') {
            if (currentInput === '' || previousInput === '') return;
            calculate();
            operation = null;
        }

        if (value === 'C') {
            currentInput = '';
            previousInput = '';
            operation = null;
            $('#display').val('0');
        }
    });

    function calculate() {
        let result;
        const prev = parseFloat(previousInput);
        const 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();
        previousInput = '';
        resetScreen = true;
        $('#display').val(currentInput);
    }
});

功能扩展

如果需要更复杂的功能，可以添加以下特性：

支持键盘输入
添加历史记录功能
实现科学计算器功能（如平方根、幂运算等）

// 键盘支持示例
$(document).keypress(function(e) {
    const key = String.fromCharCode(e.which);
    if (key.match(/[0-9\.\+\-\*\/=cC]/)) {
        $('.buttons button').filter(function() {
            return $(this).text() === key;
        }).click();
    }
});