<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .calculator {
            background-color: #2c3e50;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            width: 320px;
        }

        .display {
            background-color: #ecf0f1;
            color: #2c3e50;
            font-size: 2.5rem;
            text-align: right;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 15px;
            min-height: 70px;
            overflow-x: auto;
        }

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

        .btn {
            font-size: 1.5rem;
            padding: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .btn:hover {
            opacity: 0.9;
        }

        .btn.number {
            background-color: #3498db;
            color: white;
        }

        .btn.operator {
            background-color: #e67e22;
            color: white;
        }

        .btn.clear {
            background-color: #e74c3c;
            color: white;
            grid-column: span 2;
        }

        .btn.equal {
            background-color: #2ecc71;
            color: white;
        }

        .btn.zero {
            grid-column: span 2;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="btn clear" id="clear">C</button>
            <button class="btn operator" data-operator="÷">÷</button>
            <button class="btn operator" data-operator="×">×</button>
            <button class="btn operator" data-operator="-">-</button>

            <button class="btn number">7</button>
            <button class="btn number">8</button>
            <button class="btn number">9</button>
            <button class="btn operator" data-operator="+">+</button>

            <button class="btn number">4</button>
            <button class="btn number">5</button>
            <button class="btn number">6</button>
            <button class="btn operator" data-operator="+">+</button>

            <button class="btn number">1</button>
            <button class="btn number">2</button>
            <button class="btn number">3</button>
            <button class="btn equal" id="equals">=</button>

            <button class="btn number zero">0</button>
            <button class="btn number">.</button>
            <button class="btn equal" id="equals2">=</button>
        </div>
    </div>

    <script>
        const display = document.getElementById('display');
        const numberButtons = document.querySelectorAll('.btn.number');
        const operatorButtons = document.querySelectorAll('.btn.operator');
        const clearButton = document.getElementById('clear');
        const equalsButtons = document.querySelectorAll('.btn.equal');

        let currentValue = '';
        let previousValue = '';
        let currentOperator = '';
        let resetDisplay = false;

        // Update display with current value
        function updateDisplay() {
            display.textContent = currentValue || '0';
        }

        // Add event listeners to number buttons
        numberButtons.forEach(button => {
            button.addEventListener('click', () => {
                const value = button.textContent;

                if (value === '.' && currentValue.includes('.')) return;

                if (resetDisplay) {
                    currentValue = value;
                    resetDisplay = false;
                } else {
                    currentValue += value;
                }

                updateDisplay();
            });
        });

        // Add event listeners to operator buttons
        operatorButtons.forEach(button => {
            button.addEventListener('click', () => {
                const operator = button.dataset.operator;

                if (currentValue === '') return;

                if (previousValue !== '' && currentOperator !== '') {
                    calculate();
                }

                previousValue = currentValue;
                currentOperator = operator;
                resetDisplay = true;
            });
        });

        // Calculate function
        function calculate() {
            let result;
            const prev = parseFloat(previousValue);
            const current = parseFloat(currentValue);

            if (isNaN(prev) || isNaN(current)) return;

            switch (currentOperator) {
                case '+':
                    result = prev + current;
                    break;
                case '-':
                    result = prev - current;
                    break;
                case '×':
                    result = prev * current;
                    break;
                case '÷':
                    result = current === 0 ? 'Error' : prev / current;
                    break;
                default:
                    return;
            }

            currentValue = result.toString();
            currentOperator = '';
            previousValue = '';
        }

        // Equals button functionality
        equalsButtons.forEach(button => {
            button.addEventListener('click', () => {
                if (currentOperator === '' || previousValue === '') return;

                calculate();
                updateDisplay();
                resetDisplay = true;
            });
        });

        // Clear button functionality
        clearButton.addEventListener('click', () => {
            currentValue = '';
            previousValue = '';
            currentOperator = '';
            updateDisplay();
        });
    </script>
</body>
</html>

作者声明:本文包含人工智能生成内容。